This article describes a use of jquery and Yahoo YQL Services to achieve the weather forecast function, the need for friends can refer to the
This code does not involve any back-end development code (such as. Net,java, etc.). The most authoritative weather forecast is the Chinese Weather Network (http://www.weather.com.cn/), because this is the official meteorological data, in addition to commercial value-added services, but also provides a free JSON data format to return the weather data to view the weather data in Hangzhou, for example, You can enter the following address: Http://m.weather.com.cn/data/101210101.html, the returned JSON data format is shown below: YQL Services can be implemented on the Internet different data sources query,filter,combine (query, filter, merge), provide similar SQL, the specific address is as follows: http://developer.yahoo.com/yql/console/. When the query is implemented, the YQL service accesses the data source on the network, transmits the data, returns the data results in XML or JSON form. YQL can use many types of data sources, including Yahoo! Web services or other network service, and network data types such as: HTML, XML, RSS, and Atom. therefore can use the combination of the two to complete the development of the weather forecast function, the specific JS code is as follows: code as follows: function GetWeather () { & nbsp $.getjson ("Http://query.yahooapis.com/v1/public/yql", { , , & nbsp &NBSP;Q: "SELECT * from JSON where url=" http://m.weather.com.cn/data/101210101.html ", format: "JSON" }, function (data) { & nbsp if (data.query.results) { &NBSP ; //$ ("#content"). Text (Json.stringify (data.query.results)); &NBSP var j_data = Json.parse (json.stringify (data.query.results)); //alert (J_data.weatherinfo.city); $ ("#content") Append ("<p>" +j_dat a.weatherinfo.city+ "Weather Forecast (data source China Weather Network)" + "</p>"); $ ("#content") Append ("<p>" +j_ data.weatherinfo.date_y+ "" +j_data.weatherinfo.week+ "" +j_data.weatherinfo.temp1+ "" +J_data.weatherinfo.weather1+ "" +j_data.weatherinfo.wind1+ "" +j_data.weatherinfo.index+ "" +j_data.weatherinfo.index_d+ "" </p> "); var t= J_data.weatherinfo.date_y; t=t.replace ("Year", "/"); t=t.replace ("month", "/"); &NBSP; t=t.replace ("Day", ""); var TDY = new Date (t); var t2 = new Date (); &NBS P t2.setdate (Tdy.getdate () +1); &NBS P $ ("#content"). Append ("<p>" + T2). Format ("YYYY year mm month DD Day") + "" +getweekdays (T2) + "+j_data.weatherinfo.temp2+" "+j_data.weatherinfo.weather2+" "+j_ data.weatherinfo.wind2+ "</p>"); var t3 = new Date (); &NBSP; t3.setdate (Tdy.getdate () +2); $ ("#content") Append ("<p>" +t3. Format ("YYYY year mm month DD Day") + "" +getweekdays (T3) + "+j_data.weatherinfo.temp3+" "+j_data.weatherinfo.weather3+" "+j_ data.weatherinfo.wind3+ "</p>"); var t4 = new Date (); t4.setdate (Tdy.getdate () +3); $ ("#content") Append ("<p>" +t4. Format ("YYYY year mm month DD Day") + "" +getweekdays (T4) + "+j_data.weatherinfo.temp4+" "+j_data.weatherinfo.weather4+" "+j_ data.weatherinfo.wind4+ "</p>"); var t5 = new Date (); T5.setdate (Tdy.getdate () +4); $ ("#content") Append ("<p>" +t5. Format ("YYYY year mm month DD Day") + "" +getweekdays (T5) + "+j_data.weatherinfo.temp5+" "+j_data.weatherinfo.weather5+" "+j_ data.weatherinfo.wind5+ "</p>"); var t6 = new Date (); t6.setdate (Tdy.getdate () +5); $ ("#content") Append ("<p>" +t6. Format ("YYYY year mm month DD Day") + "" +getweekdays (T6) + "+j_data.weatherinfo.temp6+" "+j_data.weatherinfo.weather6+" "+j_ data.weatherinfo.wind6+ "</p>"); //alert (getweekdays (T2)); } else { &NBSP $ ("#content"). Text (' No such code: ' + code '); &NBSP, //$.getjson ("http://m.weather.com.cn/data/101210101.html", NULL, function ( JSON) {alert (JSON);}); FU Nction getweekdays (Datey) { if (Datey.getday () ==0) &NB Sp { return "Sunday"; &NB Sp &NBSP else if (Datey.getday () ==1) &NBS P { return "Monday"; else if (Datey.getday () ==2) { &NB Sp return "Tuesday"; else if (Datey.getday () ==3) &nbs P { return "Wednesday" &N Bsp &NBSP} else if (Datey.getday () ==4) {&NB Sp return "Thursday"; else if (Datey.getday () ==5) &nbs P { return "Friday" &N Bsp &NBSP} else if (Datey.getday () ==6) {&NB Sp return "Saturday"; Final implementation effect , as shown in the following figure: