武汉市委统战部-首页
搜站内索 加入收藏
天气时间
这个网站提供了一个便捷的方式来获取实时的天气和时间信息。使用 publicWeather()
函数,你可以轻松地显示当前日期、星期以及天气状况等详细信息。以下是函数中使用的变量说明:
年
、月
、日
:表示当前日期的年份、月份和日期。周
:表示当前日期所在的星期几。图标
:表示天气状况的图标,比如晴、雨等。天气
:表示当前天气状况的文字描述。气温
:表示当前气温的数值。城市
:表示当前所在的城市名称。
函数通过发送POST请求到 /home/getweather
接口来获取天气信息。如果返回的消息为 “ok”,则将相应的变量替换到 HTML 模板中。最终生成的 HTML 字符串可以在网页中展示出来,从而实现实时天气信息的展示功能。
要使用 publicWeather()
函数,你需要在代码中引入 jQuery 库(因为使用了 $.post() 方法)。然后调用该函数,并传入相应的参数值,就可以在页面上展示出天气和时间信息了。以下是一个示例:
<div id="weather"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function publicWeather() {
var html = '<span style="margin-right: 16px;">{年}年{月}月{日}日</span><span id="index-week" style="margin-right: 16px;">{周}</span><span style="margin-right: 16px;"><img src="../../Content/images/weather/{图标}.png" width="21px" height="21px" style="vertical-align: top;margin-right: 4px;">{天气}</span><span style="margin-right: 16px;">{气温}°C</span><span>{城市}</span>';
$.post('/home/getweather', function (r) {
if (r.msg == 'ok') {
html = html.replace('{年}', r.year);
html = html.replace('{月}', r.month);
html = html.replace('{日}', r.day);
html = html.replace('{周}', r.week);
html = html.replace('{图标}', r.icon);
html = html.replace('{天气}', r.weather);
html = html.replace('{气温}', r.temperature);
html = html.replace('{城市}', r.city);
$('#weather').html(html);
} else {
console.log('Failed to retrieve weather information!');
}
});
}
$(document).ready(function() {
publicWeather();
});
</script>
以上代码将在网页中的 <div id="weather"></div>