当前位置： 移动技术网 > IT编程>开发语言>JavaScript > H5 实现天气效果(心知天气插件)

H5 实现天气效果(心知天气插件)

2020年07月14日  | 移动技术网IT编程  | 我要评论

先上效果图

鼠标移上去的效果展示

核心代码如下：

  (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
    window.SeniverseWeatherWidget('show', {
        flavor: "slim",
        location: "WWE0TGW4PX6N",
        geolocation: true,
        language: "zh-Hans",
        unit: "c",
        theme: "auto",
        token: "79f3b5fa-e533-411d-aad7-9f043e316103",
        hover: "enabled",
        container: "tp-weather-widget"
    })

html：

<div id="tp-weather-widget" style="background:rgba(35, 83, 80, 0.46);margin: 10px 0px 8px 0px;width: 100%;"></div>

 

本文地址：https://blog.csdn.net/huichao199175/article/details/107316187

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网