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 your current cityJsonp (' https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback= Getcity '); Window.onload=function(){    //Request Weather Car databtn.onclick=function() {Jsonp (CreateURL ()); }};functiongetcity () {functionCity (Result) {Jsonp (CreateURL (result.name)); }    varCityName =Newbmap.localcity (); Cityname.get (city);}//Data Request Functionfunctionjsonp (URL) {varScript = 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) {varOspan = document.getelementsbyclassname (' info '); vardata =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]; varAdiv = Document.getelementsbyclassname (' Future_box '));  for(vari=0; i<adiv.length; i++){        varAspan = 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) {varfirstimg = document.getElementsByTagName ("img") [0]; varFirstweatherid=data.result.data.realtime.weather.img;    Chooseimg (FIRSTWEATHERID,FIRSTIMG); varaimg = document.getElementById (' Future_container '). getElementsByTagName (' img '));  for(varj=0; j<aimg.length; J + +){        varWeatherid = 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 '; }}//Create request data and URLs based on city namefunctionCreateURL () {varCityName = ' '; if(Arguments.length = = 0) {CityName= document.getElementById (' text '). Value; }Else{CityName= Arguments[0]; }    varurl = ' https://op.juhe.cn/onebox/weather/query?cityname= ' + encodeURI (cityname) + ' &key= 1053d001421b886dcecf81a38422a1a2&callback=getweather '; returnURL;}

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