skycons.js 基于canvas的天气动态js插件

简介: skycons.js 基于canvas的天气动态js插件

skycons.js 基于canvas的天气动态js插件


skycons.js是一个开源的javascript天气动画图标渲染器。相当于gif动图一样。

skycons CDN地址:https://www.bootcdn.cn/skycons/

20个图标示例(它们是动态的!颜色也可以自己设置!)


20200120192946400.png

用法一


1.引入js CDN
<script src="https://www.bootcdn.cn/skycons/"></script>
2.html文件里面添加标签
<canvas id="icon4" width="88" height="88"></canvas>
3.html文件初始化并调用
var skycons = new Skycons({
            "color": "#333",
            "resizeClear": true // 在Android上,需要添加一个讨厌的hack: {"resizeClear": true}
        });
        skycons.add("icon1", Skycons.CLEAR_DAY);//晴
        skycons.add("icon2", Skycons.CLEAR_NIGHT);//晚 晴
        skycons.add("icon3", Skycons.PARTLY_CLOUDY_DAY);//多云见晴
        skycons.add("icon4", Skycons.PARTLY_CLOUDY_NIGHT);// 晚 多云见晴
        skycons.add("icon5", Skycons.CLOUDY);// 阴
        skycons.add("icon6", Skycons.RAIN);//雨
        skycons.add("icon7", Skycons.SLEET);//冰雹
        skycons.add("icon8", Skycons.SNOW);//雪
        skycons.add("icon9", Skycons.WIND);//风
        skycons.add("icon10", Skycons.FOG);//雾
        skycons.add("icon11", Skycons.LITTLE_RAIN);//小雨
        skycons.add("icon12", Skycons.LITTLE_RAIN_SUN);//小雨转晴
        skycons.add("icon13", Skycons.RAIN_SUN);//大雨转晴
        skycons.add("icon14", Skycons.LIGHTING);//雷
        skycons.add("icon15", Skycons.LIGHTING_RIAN);//雷阵雨
        skycons.add("icon16", Skycons.RAIN_SNOW);//雨夹雪
        skycons.add("icon17", Skycons.RAINSTORM);//暴雨
        skycons.add("icon18", Skycons.HAIL);//冰雹
        skycons.add("icon19", Skycons.SANDSTORM);//沙塵暴
        skycons.add("icon20", Skycons.HAIL_RIAN);//冰雹夹雨
        skycons.play();

用法二


直接通过提供的方法,用js直接添加。

<script src="vendor/skycons/skycons.min.js"></script>
<script>
// 1、创建skycons实例
var skycons = new Skycons({
  "color": "#0099ff",
  "resizeClear": true // 在Android上,需要添加一个讨厌的hack: {"resizeClear": true}
});
// 2、使用实例创建图标
// 2.1、可以直接使用id值添加图标
//      skycons.add(id,iconName)
skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);
// 2.2、也可以把canvas的DOM传进去
//      skycons.add(DOM,iconName)
skycons.add(document.getElementById("icon2"), Skycons.DAY_SUNNY);
// 3、play开始动画
skycons.play();
// 3.1、pause暂停动画(所有动画)
skycons.pause();
// 3.2、set改变图标
skycons.set("icon1", Skycons.PARTLY_CLOUDY_NIGHT);
// 3.3、移除动画
// skycons.remove("icon2");
</script>


相关文章
|
18天前
|
移动开发 前端开发 JavaScript
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜
29 6
|
1月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
57 0
|
1月前
|
数据采集 JavaScript 前端开发
使用Go和JavaScript爬取股吧动态信息的完整指南
本文介绍了如何使用Go和JavaScript构建网络爬虫,从股吧网站抓取实时股市信息。通过设置代理服务器以应对反爬策略,利用`got`库执行JavaScript提取动态数据,如用户讨论和市场分析。示例代码展示了爬虫的实现过程,包括浏览器实例创建、代理配置、JavaScript执行及数据打印。此方法有助于投资者及时获取市场资讯,为决策提供支持。
使用Go和JavaScript爬取股吧动态信息的完整指南
|
4天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
26天前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
6天前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
6天前
|
数据采集 前端开发 JavaScript
Python爬虫技术:动态JavaScript加载音频的解析
Python爬虫技术:动态JavaScript加载音频的解析
|
1月前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
32 1
|
1月前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
74 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
21天前
|
JSON JavaScript 数据格式
1.js动态的往json数据添加新属性和值 2.JSON 和 JS 对象互转 3.对象转化为数组
1.js动态的往json数据添加新属性和值 2.JSON 和 JS 对象互转 3.对象转化为数组
19 0