前端天气插件tpwidget使用方法详解


Posted in Javascript onJune 24, 2019

本文实例为大家分享了前端天气插件tpwidget的具体使用方法,供大家参考,具体内容如下

PS:需要放到服务器才会生效

方法一:(心知天气)

<div id="tp-weather-widget" style="background: #666"></div>
<script>
  (function (T, h, i, n, k, P, a, g, e) {
    g = function () {
      P = h.createElement(i);
      a = h.getElementsByTagName(i)[0];
      P.src = k;
      P.charset = "utf-8";
      P.async = 1;
      a.parentNode.insertBefore(P, a)
    };
    T["ThinkPageWeatherWidgetObject"] = n;
    T[n] || (T[n] = function () {
      (T[n].q = T[n].q || []).push(arguments)
    });
    T[n].l = +new Date();
    if (T.attachEvent) {
      T.attachEvent("onload", g)
    } else {
      T.addEventListener("load", g, false)
    }
  }(window, document, "script", "tpwidget", "//widget.seniverse.com/widget/chameleon.js"))
</script>
<script>
  tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "zh-chs",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#FFFFFF",
    "uid": "UB6953924F",
    "hash": "ce68b5b7b447ec5bda327f8c9c2d59f9"
  });
  tpwidget("show");
</script>

结果:

前端天气插件tpwidget使用方法详解

方法二:(中国天气插件)

配置项的设置(例如背景、颜色、圆角):https://cj.weather.com.cn/plugin/pc

<div id="weather-float-he"></div>
<script type="text/javascript">
WIDGET = {FID: 'KbzQ7JDMhF'}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>

效果:

前端天气插件tpwidget使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 #Javascript
JS实现给数组对象排序的方法分析
Jun 24 #Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 #Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 #Javascript
JS字符串常用操作方法实例小结
Jun 24 #Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 #Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 #Javascript
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
为你总结一些php系统类函数
2015/10/21 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
使用python绘制常用的图表
2016/08/27 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
某公司部分笔试题
2013/11/05 面试题
医学院护理专业应届生求职信
2013/11/12 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
端午节活动总结报告
2015/02/11 职场文书
学校党员干部承诺书
2015/05/04 职场文书
新员工入职感想
2015/08/07 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python