您的位置：首页 > 其它

网页天气模块，包括当天天气和未来四天预报

2017-01-04 14:12 411 查看

已知问题：该API本地可以正常使用，如果在https页面下会由于ajax请求http的资源导致被block掉。已改用和风天气API解决了该问题。

自己制作了一个简单的天气模块，可以显示当天天气和未来四天的预报。效果图如下：

HTML如下：

<body>
<div class="weather-box">
<h5 class="today"><span class="thiscity">-</span>  星期<span class="day"></span>  <span class="year"></span>年<span class="month"></span>月<span class="date"></span>日
<span class="choosecity">选择城市：<input type="text" name="city" class="city" value="北京" maxlength="6"></span>
<span class="update">更新</span></h5>
<div class="todayinfo">
<h1 class="temprange">~</h1>
<p class="type">-</p>
<p class="wind">-</p>
<p>实时空气质量：<span class="aqi">-</span></p>
</div>
<div class="todayotherinfo">
<p class="time">更新中……</p>
<p>实时：<span class="nowtemp"></span>°C</p>
<h4>感冒指数：</h4>
<p class="coldinfo"></p>
</div>
<div class="future">
<ul>
<li class="future-item1">
<h6 class="date">-</h6>
<h3 class="temprange">~</h3>
<p class="type">-</p>
<p class="wind">-</p>
</li>
<li class="future-item2">
<h6 class="date">-</h6>
<h3 class="temprange">~</h3>
<p class="type">-</p>
<p class="wind">-</p>
</li>
<li class="future-item3">
<h6 class="date">-</h6>
<h3 class="temprange">~</h3>
<p class="type">-</p>
<p class="wind">-</p>
</li>
<li class="future-item4">
<h6 class="date">-</h6>
<h3 class="temprange">~</h3>
<p class="type">-</p>
<p class="wind">-</p>
</li>
</ul>
</div>
</div>
</body>

CSS就不贴了，JS代码如下（jQuery）：

$(function(){
(function(){
// 以下获得今天的日期与星期
function updatedate(){
var now=new Date();
var day=now.getDay();
var year=now.getFullYear();
var month=now.getMonth();
var date=now.getDate();
var time=now.toLocaleTimeString();

var day2week="";
switch(day) {
case 0:
day2week="日";
break;
case 1:
day2week="一";
break;
case 2:
day2week="二";
break;
case 3:
day2week="三";
break;
case 4:
day2week="四";
break;
case 5:
day2week="五";
break;
case 6:
day2week="六";
break;
}

$(".today .day").text(day2week);
$(".today .year").text(year);
$(".today .month").text(month+1);
$(".today .date").text(date);
$(".todayotherinfo .time").text("更新时间："+time);
}

// 取出字符串中数字的方法
String.prototype.str2num=function(){
var reg=/[\d-]/g;
return parseInt(this.match(reg).join(""));
};

// 更新所有天气信息
function update(){
var city=$(".city").val()||"北京";
var url="http://wthrcdn.etouch.cn/weather_mini?city="+city;
$.ajax({
url: url,
success:function(info){
var tempinfo=JSON.parse(info);
// 如果成功取得天气信息
if(tempinfo.status==1000){
// 更新时间
updatedate();
// 显示选择的城市
$(".today .thiscity").text(city);

// 实时温度和感冒指数
$(".todayotherinfo .nowtemp").text(tempinfo.data.wendu);
$(".todayotherinfo .coldinfo").text(tempinfo.data.ganmao);

// 更新今日天气详细信息
var today=tempinfo.data.forecast[0];
var temprange=today.low.str2num()+"~"+today.high.str2num();
$(".todayinfo .temprange").text(temprange);
$(".todayinfo .type").text(today.type);
var wind=today.fengli+today.fengxiang;
$(".todayinfo .wind").text(wind);
$(".todayinfo .aqi").text(tempinfo.data.aqi);

// 未来四天预报
$(".future li").each(function(index) {
var idx=index+1;
var future=tempinfo.data.forecast[idx];

var date=future.date;
var temprange=future.low.str2num()+"~"+future.high.str2num();
var type=future.type;
var wind=future.fengli+future.fengxiang;

$(this).find('.date').text(date);
$(this).find('.temprange').text(temprange);
$(this).find('.type').text(type);
$(this).find('.wind').text(wind);
});
}else{
// 无法取得城市的天气信息
$(".today .thiscity").text("无效的城市");
}
}
});
}
update();

// 点击更新
$(".today .update").click(function(event) {
update();
});

// 每小时自动更新
var updatetimer=setInterval(function(){
update();
},3600000);
})();
});

关键点在于天气API，有了这个API，其他都很简单了。

http://wthrcdn.etouch.cn/weather_mini?city=城市

代码在我的Github：https://github.com/zhangcuiZC/My-FreeCodeCamp/tree/master/weather

2017/07/07

可能由于和风天气API的变动，导致返回的数据中少了air字段，有需要的可以根据返回数据结构修改源码。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航