WeatherBug HTML代码 Web端天气组件各式代码分享给博客添加天气信息

梦溪

发布于 2021-08-09 15:06:06

2K0

发布于 2021-08-09 15:06:06

文章被收录于专栏：梦溪博客梦溪博客

WeatherBug

最近想给博客添加一个天气信息，查了不少资料后发现一个网站可以自动生成很多天气信息组件，可以自定义生成喜欢的组件，唯一遗憾的是不能跟随IP自动生成天气信息，地点是固定的。

支持自定义设置，地点、大小、语言等，实时预览。

生成html代码后将之复制到主题header代码中或者sider中，放置至合适位置即可。

image.png

点击跳转

以上海为例，生成代码：

<!-- weather widget start --><div id="m-booked-bl-simple-24176"> <div class="booked-wzs-160-110 weather-customize" style="background-color:#137AE9;width:160px;" id="width1"> <div class="booked-wzs-160-110_in"> <div class="booked-wzs-160-data"> <div class="booked-wzs-160-left-img wrz-18"></div> <div class="booked-wzs-160-right"> <div class="booked-wzs-day-deck"> <div class="booked-wzs-day-val"> <div class="booked-wzs-day-number"><span class="plus">+</span>28</div> <div class="booked-wzs-day-dergee"> <div class="booked-wzs-day-dergee-val">°</div> <div class="booked-wzs-day-dergee-name">C</div> </div> </div> <div class="booked-wzs-day"> <div class="booked-wzs-day-d"><span class="plus">+</span>29°</div> <div class="booked-wzs-day-n"><span class="plus">+</span>24°</div> </div> </div> <div class="booked-wzs-160-info"> <div class="booked-wzs-160-city">上海</div> <div class="booked-wzs-160-date">星期三, 09</div> </div> </div> </div> <div class="booked-wzs-center"><span class="booked-wzs-bottom-l"> 查看7天天气预报</span></div> </a> </div> </div> </div><script type="text/javascript"> var css_file=document.createElement("link"); var widgetUrl = location.href; css_file.setAttribute("rel","stylesheet"); css_file.setAttribute("type","text/css"); css_file.setAttribute("href",'https://s.bookcdn.com/css/w/booked-wzs-widget-160.css?v=0.0.1'); document.getElementsByTagName("head")[0].appendChild(css_file); function setWidgetData_24176(data) { if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = document.getElementById('m-booked-bl-simple-24176'); if(objMainBlock !== null) { var copyBlock = document.getElementById('m-bookew-weather-copy-'+data.results[i].widget_type); objMainBlock.innerHTML = data.results[i].html_code; if(copyBlock !== null) objMainBlock.appendChild(copyBlock); } } } else { alert('data=undefined||data.results is empty'); } } var widgetSrc = "https://widgets.booked.net/weather/info?action=get_weather_info;ver=7;cityID=18409;type=1;scode=2;ltid=3457;domid=;anc_id=34345;countday=undefined;cmetric=1;wlangID=17;color=137AE9;wwidth=160;header_color=ffffff;text_color=333333;link_color=08488D;border_form=1;footer_color=ffffff;footer_text_color=333333;transparent=0;v=0.0.1";widgetSrc += ';ref=' + widgetUrl;widgetSrc += ';rand_id=24176';var weatherBookedScript = document.createElement("script"); weatherBookedScript.setAttribute("type", "text/javascript"); weatherBookedScript.src = widgetSrc; document.body.appendChild(weatherBookedScript) </script><!-- weather widget end -->

WeatherBug 小工具的主要特点

当您认为小部件不能再改进时，您突然发现了一个带有令人愉快的文本和图标的动画 WeatherBug 小部件。对于那些不熟悉 WeatherBug 插件的人，我们提供了由专业的世界著名天气网络提供支持的最准确的天气应用程序。最终，这个小部件有一些新的很棒的功能：

您可以接收从当前时期到 10 天的实时天气预报和状况。
所有的天气地图都是动画的，并根据您喜欢的位置进行调整。
您可以收到最快的恶劣天气警报，其中还涉及 NWS 和 NOAA 2 种类型的监视和警告。

如何在网页中嵌入天气预报

使用我们简单的嵌入天气小部件在您的网站上添加天气是一件简单的事情。只需几步即可完成。您无需查找天气小部件 url 即可了解如何下载此插件。当您按下“获取 HTML 代码”按钮时，您将看到简单说明如何在您的网站上添加meteo 应用程序的说明。因此，您的第一步是突出显示框架中显示的代码。接下来您要做的是将以下代码复制并粘贴到您网站的后端，这就是全部内容。天气小部件出现在页面上。您甚至不需要更新它，因为一切都是自动完成的。因此，受益于我们免费且简单的网站可嵌入天气小部件，为您的访问者创造愉快的体验。