Simple implementation code of native js three-level linkage

The example in this article shares a js weather query application for your reference. The specific content is as follows

Implementation function: display the weather conditions of the user's city when opening the web page. Enter a city in the input box to query other cities.

Implementation process: First call the API of Baidu Map to obtain the city where the user is located, and then call the weather API of aggregated data to put the data on the page. Since ajax does not support cross-domain, jsonp is used to call data.

The implementation principle is relatively simple, and the HTML and CSS are relatively long. I will only post the js code. If you want to see the complete code,

//调用jsonp函数请求当前所在城市
jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');
window.onload=function(){
 //请求天气车数据
 btn.onclick=function (){
  jsonp(createUrl());
 }
};
function getCity(){
 function city(result){
  jsonp(createUrl(result.name));
 }
 var cityName = new BMap.LocalCity();
 cityName.get(city);
}
// 数据请求函数
function jsonp(url){
 var script = document.createElement('script');
 script.src = url;
 document.body.insertBefore(script, document.body.firstChild);
 document.body.removeChild(script);
}
//数据请求成功回调函数，用于将获取到的数据放入页面相应位置
function getWeather(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='星期'+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');
 for(var i=0; i<aDiv.length; i++){
  var aSpan = aDiv[i].getElementsByClassName(&#39;future_info&#39;);
  aSpan[0].innerHTML = data.weather[i].date;
  aSpan[1].innerHTML = &#39;星期&#39;+data.weather[i].week;
  aSpan[2].innerHTML =data.weather[i].info.day[1];
  aSpan[3].innerHTML = data.weather[i].info.day[2]+&#39;℃&#39;;
 }
 changeImg(response);
}
//根据获取到的数据更改页面中相应的图片
function changeImg(data){
 var firstImg = document.getElementsByTagName("img")[0];
 var firstWeatherId=data.result.data.realtime.weather.img;
 chooseImg(firstWeatherId,firstImg);
 
 var aImg = document.getElementById(&#39;future_container&#39;).getElementsByTagName(&#39;img&#39;);
 for(var j=0; j<aImg.length; j++){
  var weatherId = data.result.data.weather[j].info.day[0];
  chooseImg(weatherId,aImg[j]);
 }
}
//选择图片
function chooseImg(id,index){
 switch(id){
  case &#39;0&#39;:
   index.src=&#39;images/weather_icon/1.png&#39;;
   break;
  case &#39;1&#39;:
   index.src=&#39;images/weather_icon/2.png&#39;;
   break;
  case &#39;2&#39;:
   index.src=&#39;images/weather_icon/3.png&#39;;
   break;
  case &#39;3&#39;:
  case &#39;7&#39;:
  case &#39;8&#39;:
   index.src=&#39;images/weather_icon/4.png&#39;;
   break;
  case &#39;6&#39;:
   index.src=&#39;images/weather_icon/6.png&#39;;
   break;
  case &#39;13&#39;:
  case &#39;14&#39;:
  case &#39;15&#39;:
  case &#39;16&#39;:
   index.src=&#39;images/weather_icon/5.png&#39;;
   break;
  case &#39;33&#39;:
   index.src=&#39;images/weather_icon/7.png&#39;;
   break;
  default:
   index.src=&#39;images/weather_icon/8.png&#39;;
 }
}
//根据城市名创建请求数据及url
function createUrl(){
 var cityName = &#39;&#39;;
 if(arguments.length == 0) {
  cityName = document.getElementById(&#39;text&#39;).value;
 }else{
  cityName = arguments[0];
 }
 var url = &#39;https://op.juhe.cn/onebox/weather/query?cityname=&#39; + encodeURI(cityName) + &#39;&key=1053d001421b886dcecf81a38422a1a2&callback=getWeather&#39;;
 return url;
}

is a simple small demo, but there are still many shortcomings. We welcome everyone's suggestions for improvement.

Tomorrow I will update some of the problems encountered and their solutions, please pay attention.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to the simple implementation code of native js three-level linkage, please pay attention to the PHP Chinese website!