已知問題：該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字段，有需要的可以根據返回數據結構修改源碼。