推荐
最新
待解答
搜索问答
问
如何实现H5在QQ平台上的二次分享卡片效果？
编辑于 2024-05-10
答冰书
在QQ平台上实现H5页面的二次分享卡片效果，你需要使用QQ的分享接口。以下是实现此功能的步骤：
1. 在你的H5页面中，引入QQ分享的JavaScript SDK。将以下代码添加到`<head>`标签内：
html<script src="https://open.mobile.qq.com/sdk/sdk_js.qq.js"></script>
2. 在`<body>`标签内，添加以下代码以初始化QQ分享接口：
html<script>
mqq.config({
debug: false, // 开启调试模式
appId: '你的appId', // 必填，公众号的唯一标识
timestamp: '生成签名的时间戳', // 必填，生成签名的时间戳
nonceStr: '生成签名的随机串', // 必填，生成签名的随机串
signature: '签名', // 必填，签名
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
});
mqq.ready(function() {
// 分享给好友
mqq.ui.setOnMenuShareAppMessage({
title: '分享标题', // 分享标题
desc: '分享描述', // 分享描述
share_url: '分享链接', // 分享链接
image_url: '分享图标' // 分享图标
});
// 分享到QQ空间
mqq.ui.setOnMenuShareTimeline({
title: '分享标题', // 分享标题
desc: '分享描述', // 分享描述
share_url: '分享链接', // 分享链接
image_url: '分享图标' // 分享图标
问
使用animate的reverse会导致backdrop-filter失效？
编辑于 2024-05-03
答冰书
在某些情况下，使用`animate`的`reverse`可能会导致`backdrop-filter`失效。这可能是由于浏览器的兼容性问题、实现错误或其他原因导致的。
要解决这个问题，你可以尝试以下方法：
1. 确保你的浏览器支持`backdrop-filter`和`animate`属性。你可以使用[Can I use](https://caniuse.com/)这个网站来检查浏览器的兼容性。
2. 检查你的CSS代码是否正确。确保`backdrop-filter`属性已正确应用于需要它的元素上。例如：
css
.container {
backdrop-filter: blur(5px);
}
3. 检查你的`animate`代码是否正确。确保你正确地使用了`reverse`属性。例如：
css
@keyframes example {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.container {
animation: example 2s;
}
.container:hover {
animation-direction: reverse;
}
4. 如果问题仍然存在，尝试使用其他方法实现动画效果，例如使用JavaScript或jQuery库。
5. 如果你认为这是浏览器的bug，可以在浏览器的官方论坛或GitHub仓库中报告问题。在报告问题时，请提供详细的描述、代码示例和截图，以便开发人员更容易地诊断和解决问题。
希望这些建议能帮助你解决问题。如果你需要更多帮助，请随时提问。
问
如何实现数据可视化？
提问于 2018-10-24
答DEA林晨曦
以下示例是做一份数据的可视化图表，一步步的来看下我们如何获取数据，以及如何进行可视化的展示。
📷
在上章内容中，提到了关于【数据可视化迭代过程】的步骤，这也能看出整个过程包含的步骤，大致有：1. 确定主题 - 2．数据获得 - 3.图表选择（表达）- 4图表绘制。
当然了我们也可以看到可视化是要一个不断迭代的过程，步骤之间都需要多次的迭代修改的。
确定主题
这肯定是第一步了，在做数据可视化的时候，首先你要明了你要做什么，想要从数据获中取什么信息，有了目标才能明确的往下做。
那我们这次还是来做关于空气质量PM2.5的数据展示，了解历年来PM2.5的实际情况和发展趋势。
数据获得
对于全国空气质量的数据，最权威的来源肯定是来自于中国环境监测总站（http://www.cnemc.cn/） 的数据提供。但是监测总站的API提供的并不是很详细，还有很多第三方也提供类似的API接口，比如PM25.in（http://pm25.in/） ，在API说明上做的很详细，他们的数据每日更新。所以这次我们选择PM25这个网站来获取数据源。
📷
我们可以看到PM25提供的内容是相当多，包括PM2.5、AQI、PM10、CO、NO2、O3等等。我们只需要PM2.5的数据，所以我们把其他不需要的数据都可以去除掉，同时把Json的数据转换为CSV的数据格式，这里转换数据只是为了下一步处理方便，我这边是选用Processing来做数据可视化处理的。如果你用D3.js，Echart来做的话，Json可能会更方便点。
📷
图表选择（表达）
对于很多人（非设计师）来说数据可能容易获取，但是像要把数据转换成合适的图表进行表达反而非常困难的。因为同样的数据，用不同的图表进行展示出来，得到的效果是完全不一样的。在平时我们可能用到最多的就是通过Excel来做的图表，在Excel2010的版本里面，提供了10类共53个图表，还提供了什么数据透视图，自定义图表等等，总之种类非常多。不过尽管图表种类繁多，但其基本类型只有以下几种：
曲线图：用来反映随时间变化的趋势；
柱形图：用来反映分类项目之间的比较，也可以用来反映时间趋势；
条形图：用来反映分类项目之间的比较；
散点图：用来反映相关性或分布关系；
饼图：用来反映构成，即部分占总体的比例；
地图：用来反映区域之间的分类比较；
那知道了基础图表的类型，如何去做图表的选择呢？国外专家Andrew Abela他将图表展示的关系分为4 类：比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候，可以参考下这个图。
📷
图表绘制
俗话说【不会撸码的交互不是好的数据可视化设计师】，虽然现在市面上有各式各样的可视化的方法和工具，但坦白来说【这些可视化工具都是大坑！！！】，要想做好可视化的表现，最好的方式还是需要掌握一门编程语言，只有这样你才能最合适的表达清楚出你想传达出来的数据信息。
这里给各位想跳入数据可视化这个大坑的设计师们（编程大佬请无视），推荐一下Processing这个创意编程语言。
Processing是美国麻省理工学院媒体实验室旗下美学与运算小组创造出来的（就是搞设计的人做出来的编程语言），非常容易上手，代码逻辑也很简单，几段代码就能做出十分出现效果的展示，下图就是Processing的界面。
📷
不过Processing没有代码提示的功能的，用起来还是十分痛苦的，经常是因为一个单词写错了，而造成程序报错。不过后来我发现到Subilme Text能支持Processing的编译环境，而且能提供代码提示功能，简直是发现新大陆一样，从此Processing用起来再也不费劲了。欢迎大家一起入坑Processing一起学习。
确定用Processing来实现后，我们继续来做PM2.5的可视化展示。国家环保部将空气质量分为六个等级，分别用绿、黄、橙、红、紫、褐六个颜色来标注，对于着优、良、轻度污染、中度污染、重度污染和严重污染六个空气质量。我们要展示历年来PM2.5的实际情况和发展趋势，就可以把每天的空气质量转换一个个不同颜色的小方格，通过颜色的区别来展示当天的PM2.5情况。
📷
先在纸上画一个简单的草图。已年为划分，下面用小方格展示该年内每天的空气质量是什么等级，把当天的PM2.5数值转换对应的颜色值。
📷
确定方式后，开始撸代码，代码很简单的，我大概编写了40来行就完成了，代码逻辑很简单就是先导入数据，然后判断当前数据的值是多少，根据不同的值赋予小方块不同的颜色。
📷
实现之后，看起来就是这样子的。日期时间轴是按照1月到12月排列的，通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾，就是1-2月，11-12月之间，也就是每年冬天就是PM2.5污染程度高的时间。
📷
我们继续把成都历史的数据可视化后来看下。我们发现12年之前成都空气质量都还不错的，在14年的时候，就没有小绿格了，可见14年成都空气质量有多差劲，15年、16年后慢慢的开始有点好转。我们在把北京，上海和深圳的天气拔来看看。
📷
第一列是成都08-16年的空气质量，第二列是北京的，第三列是上海的，第四列是深圳的。可见深圳的空气质量完爆成都、北京和上海。几乎全是小绿格，真是宜居好地方。而帝都北京空气质量是这四个城市中最差的。其中14年都是上述几个城市空气质量最差的一年，而也是这一年央视记者柴静从央视辞职出去开始拍摄雾霾的深度调查，在第二年2015年2月28号推出纪录片《穹顶之下》，引发了公众的一片哗然，全民开始关注雾霾，政府部门也开始着手治理雾霾，15年、16年开始有所好转。
问
document.querySelector始终返回null？arrowLeft 和arrowright获取不到
编辑于 2023-08-17
答一凡sir
如果document.querySelector始终返回null，可能是由于以下几个原因：
元素选择器不正确：document.querySelector接受一个CSS选择器作为参数，并返回第一个匹配该选择器的元素。请确保你传入的选择器是正确的，否则会返回null。例如，如果你要选择一个类名为"example"的元素，应该使用.yifan-online作为选择器，而不是"yifan-online"。
脚本运行的时机不正确：在脚本中使用document.querySelector方法时，确保代码运行时DOM已经加载完毕。你可以将脚本放在window.onload回调函数中，或者将脚本放在页面底部、异步加载脚本等方式来保证脚本在DOM加载完毕后执行。
元素不存在：如果选择器是正确的，但仍然返回null，那么可能是找不到匹配的元素。请确保要查询的元素确实存在于页面中。
问
网站各个浏览器兼容性 样式、按钮事件、存储问题、插件的支持都不同，有些更甚用不了，该怎么解决呢？
编辑于 2023-07-27
答一凡sir回答已采纳
要解决网站在不同浏览器上的兼容性问题，可以采取以下几个步骤：
1. 浏览器兼容性测试：在不同的浏览器（如Chrome、Firefox、Safari、Edge等）上测试网站的样式、按钮事件和功能是否正常工作。可以使用跨浏览器测试工具（如BrowserStack、Sauce Labs、Browserling等）来简化测试流程。
2. CSS样式兼容性：使用CSS前缀以适应不同浏览器的样式要求。可以使用自动添加前缀的工具（如Autoprefixer）来自动生成兼容各浏览器的CSS样式。
3. JavaScript事件兼容性：对于不同浏览器对事件的支持差异，可以使用JavaScript库或框架（如jQuery、Modernizr、Polyfill等）来解决或规避这些问题。这些库会自动处理浏览器的兼容性问题，确保事件在各个浏览器上正常工作。
4. 存储问题兼容性：使用浏览器原生支持的存储机制，如LocalStorage和SessionStorage，并且避免使用过时的存储方式（如Cookie）。此外，对于不支持某些存储机制的浏览器，可以选择使用JavaScript库（如localForage）来提供一致的跨浏览器存储解决方案。
5. 插件兼容性：如果网站依赖于某些插件（如Flash、Java Applet等），可以考虑使用替代方案或者适配器来解决兼容性问题。另外，随着HTML5的发展，越来越多的功能被原生支持，可以尽量减少对插件的依赖。
最重要的是，及时更新和维护你的网站，关注HTML、CSS和JavaScript的最新标准和规范，以确保网站在不同浏览器上的兼容性。
问
想了解一下这段js代码可以在简化一些吗？
编辑于 2022-11-11
答胖五斤
数字没有大小写之分，不需要调用toLowerCase。
for循环可以考虑用lambda方式写，可以简洁点。
重复的操作，例如getElementById、for循环。可以封装成一个通用的函数。
问
为什么云函数连接mqtt.js失败？
编辑于 2022-11-08
答胖五斤
没有包含wx的sdk？例如： <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
问
shell脚本如何获取 node 执行 js的执行结果 或者返回值？
编辑于 2022-08-05
答西门呀在吹雪
httpStatus=`curl -i -s -m 10 $1 |grep HTTP|awk '{print $2}'`
if [ $httpStatus ] && [ $httpStatus -eq 200 -o $httpStatus -eq 401 ] ; then
echo "http状态码正常，端口已可达:"$httpStatus
else
echo "未获取到状态码，等待重试"
fi
请参考，可以使用管道符接收
问
DAU reaches the Trial Edition limit？
编辑于 2022-07-14
答用户7471955
要升级套餐了。
https://cloud.tencent.com/document/product/269/1671#.EF.BC.88.E4.BA.8C.EF.BC.89.E6.9C.8D.E5.8A.A1.E7.AB.AF.E7.9A.84.E9.94.99.E8.AF.AF.E7.A0.81
图片
问
Hls.js 怎么获取缓冲区大小，比特率？
编辑于 2022-07-12
答田
查看源码如下
get maxBitrate(): number {
return Math.max(this.realBitrate, this.bitrate);
}
2.用这个参数maxBufferLength试试
Hi~
今天想聊点什么呢？
近期活跃用户