分享一款免费好用的天气插件

♪ 背景

最近在参考别人后台模板时，发现了一款网页天气插件，感觉简单好用
对于访问量不大的页面完全可以免费应用，当然可根据需要自行决定其他付费功能
官网 - [心知天气]
https://www.seniverse.com/widget

♪ 使用方法

①. 注册用户

简单填写信息即可，当然，本人只是简单的使用了一下功能，实时获取天气信息即可

②. 定制样式

进入定制页面

weather.png

配置你需要的样式

image.png

③. 代码参考
以下是在我的账号下生成的代码，其实你也可以直接拿来使用，直接粘贴如下代码到你需要显示的页面位置即可

<div id="tp-weather-widget"></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": "auto",
        "unit": "c",
        "theme": "chameleon",
        "container": "tp-weather-widget",
        "bubble": "enabled",
        "alarmType": "badge",
        "color": "#FFFFFF",
        "uid": "UBE2C17F95",
        "hash": "13ae4a160434539eb5b40fbdf0edf418"
    });
    tpwidget("show");</script>

④. 效果截图

show.png

分享一款免费好用的天气插件

推荐阅读更多精彩内容