前端天气插件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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
一个php+js实时显示时间问题
2015/10/12 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python如何使用unittest测试接口
2018/04/04 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python pip使用超时问题解决方案
2020/08/03 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
自我鉴定的范文
2013/10/03 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js