网页天气模块，包括当天天气和未来四天预报
已知问题：该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字段，有需要的可以根据返回数据结构修改源码。
