前端天气插件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实现简单模态窗口,背景灰显
Nov 14 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 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
php 错误处理经验分享
2011/10/11 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python3多线程基础知识点
2019/02/19 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python实现图像拼接功能
2020/03/23 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
struct与class的区别
2014/02/03 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2014年外联部工作总结
2014/11/17 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
党支部对转正的意见
2015/06/02 职场文书
趣味运动会赞词
2015/07/22 职场文书
干部考核工作总结
2015/08/12 职场文书
听课评课活动心得体会
2016/01/15 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Go语言编译原理之源码调试
2022/08/05 Golang