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

 更新时间:2019年06月24日 14:08:07   作者:麋鹿传  
这篇文章主要为大家详细介绍了前端天气插件tpwidget使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了前端天气插件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>

结果:

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

配置项的设置(例如背景、颜色、圆角):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>

效果:

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

您可能感兴趣的文章:

相关文章

  • 用原生JS获取CLASS对象(很简单实用)

    用原生JS获取CLASS对象(很简单实用)

    这篇文章主要介绍了如何用原生JS获取CLASS对象,看过dom编程艺术的朋友或许会知道的
    2014-10-10
  • 微信小程序实现简易计算器

    微信小程序实现简易计算器

    这篇文章主要为大家详细介绍了微信小程序实现简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JS 60秒后重新发送验证码的实例讲解

    JS 60秒后重新发送验证码的实例讲解

    下面小编就为大家带来一篇JS 60秒后重新发送验证码的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS 根据子网掩码,网关计算出所有IP地址范围示例

    JS 根据子网掩码,网关计算出所有IP地址范围示例

    这篇文章主要介绍了JS 根据子网掩码,网关计算出所有IP地址范围,涉及IP地址、子网的正则验证,子网掩码计算等相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • 一文快速学会创建uni-app项目并了解pages.json文件

    一文快速学会创建uni-app项目并了解pages.json文件

    这篇文章主要给大家介绍了如何创建uni-app项目并了解pages.json文件的相关资料,pages.json文件用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等,需要的朋友可以参考下
    2023-10-10
  • DIV菜单层实现代码

    DIV菜单层实现代码

    昨天我问一美工jQuery怎么样了,他说简单的还可以,复杂的就不行了,我又问是哪种程度的复杂?
    2010-11-11
  • 学会javascript之迭代器

    学会javascript之迭代器

    本文主要讲解javascript之迭代器,在 JavaScript 中,迭代器是一个对象,它定义一个序列,并在终止时可能返回一个返回值。需要详细了解相关知识的小伙伴可以参考一下这篇文章
    2021-09-09
  • javascript实现校验文件上传控件实例

    javascript实现校验文件上传控件实例

    这篇文章主要介绍了javascript实现校验文件上传控件,实例分析了javascript检测上传文件类型是否为图片的功能,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • GoJs中导出图片或者SVG实现示例详解

    GoJs中导出图片或者SVG实现示例详解

    这篇文章主要为大家介绍了GoJs中导出图片或者SVG实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JS使用正则表达式获取小括号、中括号及花括号内容的方法示例

    JS使用正则表达式获取小括号、中括号及花括号内容的方法示例

    这篇文章主要介绍了JS使用正则表达式获取小括号、中括号及花括号内容的方法,涉及javascript针对三种括号正则匹配的相关操作技巧,需要的朋友可以参考下
    2018-06-06

最新评论