Native JS for small application of query weather

demo:https://zsqosos.github.io/weather/

：

Implement function: Display the weather condition of the user's city when the webpage is opened, enter the city in the input box to inquire other city.

Implementation process: First call the Baidu Map API to get the city where the user is located, and then call the aggregated data of the weather API to put the data on the page. Because Ajax does not support cross-domain, the Jsonp method is used to invoke the data.

The implementation of the principle is relatively simple, HTML and CSS longer, I just paste the JS code out, want to see the full code of friends can go to my github view Https://github.com/zsqosos/weather

//Call the JSONP function to request the current City Jsonp (' Https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1 &callback=getcity '); window.onload=function(){//Request Weather Car Data btn.onclick=function() {Jsonp (CreateURL ());}};functionGetcity () {functionCity (Result) {Jsonp (CreateURL (Result.name));}var cityname =NewBmap.localcity (); Cityname.get (city);}//Data Request functionfunctionJsonp (URL) {var script = document.createelement (' script '); SCRIPT.SRC =Url Document.body.insertBefore (script, document.body.firstChild); Document.body.removeChild (script);}//Data request success callback function to place the acquired data in the appropriate location on the pagefunctionGetWeather (response) {var Ospan = document.getelementsbyclassname (' info ');var data =Response.result.data; Ospan[0].innerhtml=Data.realtime.city_name; Ospan[1].innerhtml=Data.realtime.date; Ospan[2].innerhtml= ' Week ' +data.weather[0].week; Ospan[3].innerhtml=Data.realtime.weather.info; Ospan[4].innerhtml=data.realtime.weather.temperature+ ' ℃ '; Ospan[5].innerhtml=Data.realtime.wind.direct; ospan[6].innerhtml=data.realtime.weather.humidity+ '% '; Ospan[7].innerhtml=Data.realtime.time; Ospan[8].innerhtml=data.life.info.ziwaixian[0]; Ospan[9].innerhtml=data.life.info.xiche[0]; Ospan[10].innerhtml=data.life.info.kongtiao[0]; Ospan[11].innerhtml=data.life.info.chuanyi[0];var adiv = document.getelementsbyclassname (' Future_box ');Forvar i=0; i<adiv.length; i++){var Aspan = adiv[i].getelementsbyclassname (' Future_info '); aspan[0].innerhtml =Data.weather[i].date; aspan[1].innerhtml = ' Week ' +Data.weather[i].week; Aspan[2].innerhtml =data.weather[i].info.day[1]; aspan[3].innerhtml = data.weather[i].info.day[2]+ ' ℃ '; } changeimg (response);}//Change the corresponding picture in the page according to the data obtainedfunctionCHANGEIMG (data) {var firstimg = document.getelementsbytagname ("img") [0];var firstweatherid=data.result.data.realtime.weather.img; Chooseimg (FIRSTWEATHERID,FIRSTIMG);var aimg = document.getElementById (' Future_container '). getElementsByTagName (' img '));Forvar j=0; j<aimg.length; J + +){var Weatherid = data.result.data.weather[j].info.day[0]; Chooseimg (Weatherid,aimg[j]); }}//Select picturefunctionChooseimg (Id,index) {Switch(ID) {Case ' 0 ': index.src= ' images/weather_icon/1.png ';Break;Case ' 1 ': index.src= ' images/weather_icon/2.png ';Break;Case ' 2 ': index.src= ' images/weather_icon/3.png ';Break;Case ' 3 ':Case ' 7 ':Case ' 8 ': index.src= ' images/weather_icon/4.png ';Break;Case ' 6 ': index.src= ' images/weather_icon/6.png ';Break;Case ' 13 ':Case ' 14 ':Case ' 15 ':Case ' 16 ': index.src= ' images/weather_icon/5.png ';Break;Case ' 33 ': index.src= ' images/weather_icon/7.png ';Break;Default: index.src= ' images/weather_icon/8.png ';}} // Function CreateURL () {var cityname = "; if (arguments.length = = 0else{cityname = arguments[0 ]; } var url = ' https://op.juhe.cn/onebox/weather/query?cityname= ' + encodeURI (cityname) + ' &key=1053d001421b886dcecf81a38422a1a2&callback=getweather '  return URL;          

A simple small demo, there are many shortcomings, we welcome suggestions for improvement.

Tomorrow I will update some of the problems encountered in this and the solution, welcome attention.

Native JS for small application of query weather