本文實例為大家分享了js查詢天氣應用，供大家參考，具體內容如下

實現功能：打開網頁時顯示用戶所在城市的天氣狀況，在輸入框輸入城市可查詢其它城市。

實現過程：先調用百度地圖的API來獲取用戶所在的城市，隨后調用聚合數據的天氣API將數據放在頁面上。由于ajax不支持跨域，所以采用了jsonp的方式來調用數據。

實現的原理比較簡單，HTML和css比較長，我就只將js代碼貼出來，想看完整代碼的//調用jsonp函數請求當前所在城市

jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');

window.οnlοad=function(){

//請求天氣車數據

btn.οnclick=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

var aSpan = aDiv[i].getElementsByClassName('future_info');

aSpan[0].innerHTML = data.weather[i].date;

aSpan[1].innerHTML = '星期'+data.weather[i].week;

aSpan[2].innerHTML =data.weather[i].info.day[1];

aSpan[3].innerHTML = data.weather[i].info.day[2]+'℃';

}

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('future_container').getElementsByTagName('img');

for(var j=0; j

var weatherId = data.result.data.weather[j].info.day[0];

chooseImg(weatherId,aImg[j]);

}

}

//選擇圖片

function chooseImg(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';

}

}

//根據城市名創建請求數據及url

function createUrl(){

var cityName = '';

if(arguments.length == 0) {

cityName = document.getElementById('text').value;

}else{

cityName = arguments[0];

}

var url = 'https://op.juhe.cn/onebox/weather/query?cityname=' + encodeURI(cityName) + '&key=1053d001421b886dcecf81a38422a1a2&callback=getWeather';

return url;

}

一個簡單的小demo，還有很多不足之處，歡迎大家提出改進建議。

明天我會更新一下在這其中遇到的一些問題以及解決方法，歡迎關注。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多原生js三級聯動的簡單實現代碼相關文章請關注PHP中文網！

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的原生js写三级联动 java_原生js三级联动的简单实现代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。