前端天气插件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 相关文章推荐
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
js子页面获取父页面数据示例
May 15 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
javascript自执行函数
Feb 10 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
Dedecms常用函数解析
2008/02/01 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
PHP的5个安全措施小结
2012/07/17 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python 实现return返回多个值
2019/11/19 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
如何使用PHP session
2015/04/21 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
2014年文秘工作总结
2014/11/25 职场文书
转变工作作风心得体会
2016/01/23 职场文书
php引用传递
2021/04/01 PHP
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
css3 选择器
2022/05/11 HTML / CSS