可以直接使用http://www.tianqi.com/plugin/#tjdm定制天氣

很多外部網(wǎng)站都有天氣預(yù)報(bào)功能，對(duì)于很多企業(yè)內(nèi)部的門戶也需要有天氣預(yù)報(bào)功能，但實(shí)現(xiàn)天氣預(yù)報(bào)的功能和方式確有所差異，本文介紹一個(gè)利用Jquery和雅虎的YQL服務(wù)實(shí)現(xiàn)天氣預(yù)報(bào)功能，不涉及任何后端開發(fā)代碼（如.Net，JAVA等），并在本人之前開發(fā)的移動(dòng)OA網(wǎng)站上使用。目前最權(quán)威的天氣預(yù)報(bào)數(shù)據(jù)是中國天氣網(wǎng)（http://www.weather.com.cn/），因?yàn)檫@個(gè)是官方提供的氣象數(shù)據(jù)，除了商業(yè)的增值服務(wù)外，還提供了免費(fèi)的以JSON數(shù)據(jù)格式返回的氣象數(shù)據(jù)，以查看杭州的天氣數(shù)據(jù)為例，可以輸入以下地址：http://m.weather.com.cn/data/101210101.html ，返回的JSON數(shù)據(jù)格式如下圖：

?

??? YQL服務(wù)可以實(shí)現(xiàn)對(duì)網(wǎng)上不同數(shù)據(jù)源的query,filter,combine（查詢，過濾，合并），提供類似SQL，具體地址如下：http://developer.yahoo.com/yql/console/ 。當(dāng)實(shí)施查詢的時(shí)候，YQL服務(wù)就會(huì)訪問網(wǎng)絡(luò)上的數(shù)據(jù)源，傳輸數(shù)據(jù)，返回XML或者JSON形式的數(shù)據(jù)結(jié)果。YQL可以使用許多類型的數(shù)據(jù)源，包括Yahoo!Web services 或者其他的網(wǎng)絡(luò)服務(wù)，和網(wǎng)絡(luò)數(shù)據(jù)類型例如：HTML, XML, RSS,和Atom。

?????? 因此可以通過兩者的結(jié)合使用，完成天氣預(yù)報(bào)功能的開發(fā)，具體JS代碼如下：

?

function getWeather() {$.getJSON("http://query.yahooapis.com/v1/public/yql", {q: "select * from json where url=\"http://m.weather.com.cn/data/101210101.html\"",format: "json"}, function (data) {if (data.query.results) {//$("#content").text(JSON.stringify(data.query.results));var J_data = JSON.parse(JSON.stringify(data.query.results));//alert(J_data.weatherinfo.city);$("#content").append("<p>"+J_data.weatherinfo.city+"天氣預(yù)報(bào)(數(shù)據(jù)來源中國天氣網(wǎng))"+"</p>");$("#content").append("<p>"+J_data.weatherinfo.date_y+"&nbsp;"+J_data.weatherinfo.week+"&nbsp;"+J_data.weatherinfo.temp1+"&nbsp;"+J_data.weatherinfo.weather1+"&nbsp;"+J_data.weatherinfo.wind1+"&nbsp;"+J_data.weatherinfo.index+"&nbsp;"+J_data.weatherinfo.index_d+"</p>");var t= J_data.weatherinfo.date_y;t=t.replace("年","/");t=t.replace("月","/");t=t.replace("日","");var tdy = new Date(t); var t2 = new Date(); t2.setDate(tdy.getDate()+1);$("#content").append("<p>"+ t2.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t2)+"&nbsp;"+J_data.weatherinfo.temp2+"&nbsp;"+J_data.weatherinfo.weather2+"&nbsp;"+J_data.weatherinfo.wind2+"</p>");var t3 = new Date();t3.setDate(tdy.getDate()+2);$("#content").append("<p>"+t3.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t3)+"&nbsp;"+J_data.weatherinfo.temp3+"&nbsp;"+J_data.weatherinfo.weather3+"&nbsp;"+J_data.weatherinfo.wind3+"</p>");var t4 = new Date();t4.setDate(tdy.getDate()+3);$("#content").append("<p>"+t4.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t4)+"&nbsp;"+J_data.weatherinfo.temp4+"&nbsp;"+J_data.weatherinfo.weather4+"&nbsp;"+J_data.weatherinfo.wind4+"</p>");var t5 = new Date();t5.setDate(tdy.getDate()+4);$("#content").append("<p>"+t5.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t5)+"&nbsp;"+J_data.weatherinfo.temp5+"&nbsp;"+J_data.weatherinfo.weather5+"&nbsp;"+J_data.weatherinfo.wind5+"</p>");var t6 = new Date();t6.setDate(tdy.getDate()+5);$("#content").append("<p>"+t6.Format("yyyy年MM月dd日")+"&nbsp;"+getweekdays(t6)+"&nbsp;"+J_data.weatherinfo.temp6+"&nbsp;"+J_data.weatherinfo.weather6+"&nbsp;"+J_data.weatherinfo.wind6+"</p>");//alert(getweekdays(t2)); } else {$("#content").text('no such code: ' + code);}});//$.getJSON("http://m.weather.com.cn/data/101210101.html", null, function(json) { alert(json); }); }function getweekdays(datey){if(datey.getDay()==0){return "星期日";}else if(datey.getDay()==1){return "星期一";}else if(datey.getDay()==2){return "星期二";}else if(datey.getDay()==3){return "星期三";}else if(datey.getDay()==4){return "星期四";}else if(datey.getDay()==5){return "星期五";}else if(datey.getDay()==6){return "星期六";}}

????????? 最終實(shí)現(xiàn)的效果，如下圖：

????????

?

轉(zhuǎn)載于:https://www.cnblogs.com/yxlblogs/p/3365238.html

總結(jié)

以上是生活随笔為你收集整理的Jquery和雅虎的YQL服务实现天气预报功能！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。