本文实例为大家分享了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的三级联动
.js-demo {
width: 700px;
margin: 0 auto;
padding-top: 100px;
}
select {
margin-right: 50px;
}
省份：
城市：
区县：
// ===== ===== ===== 获取select元素 ===== ===== =====
// 获取下拉表单
var select_province = document.getElementById('province');
var select_city = document.getElementById('city');
var select_county = document.getElementById('county');
// ===== ===== ===== 准备三级联动的数据 ===== ===== =====
// 省份
var arr_province = [
// 省份ID, 省份名称
{ id: 110000, name: '北京市' },
{ id: 120000, name: '天津市' },
{ id: 130000, name: '河北省' },
{ id: 140000, name: '山西省' },
{ id: 150000, name: '内蒙古自治区' },
{ id: 210000, name: '辽宁省' },
{ id: 220000, name: '吉林省' },
{ id: 230000, name: '黑龙江省' },
{ id: 310000, name: '上海市' },
{ id: 320000, name: '江苏省' }
];
// 城市
var arr_city = [
// 城市ID, 城市名称, 城市所属的省份(即本级的上一级的ID)
{ id: 110000, name: '北京市', province_id: 110000 },
{ id: 120000, name: '天津市', province_id: 120000 },
{ id: 320100, name: '南京市', province_id: 320000 },
{ id: 320200, name: '无锡市', province_id: 320000 },
{ id: 320300, name: '徐州市', province_id: 320000 },
{ id: 320400, name: '常州市', province_id: 320000 },
{ id: 320500, name: '苏州市', province_id: 320000 },
{ id: 320600, name: '南通市', province_id: 320000 },
{ id: 320700, name: '连云港市', province_id: 320000 },
{ id: 320800, name: '淮安市', province_id: 320000 }
];
// 区县
var arr_county = [
// 区县ID, 区县名称, 区县所属的城市(即本级的上一级的ID)
{ id: 110101, name: '东城区', city_id: 110000 },
{ id: 110102, name: '西城区', city_id: 110000 },
{ id: 110105, name: '朝阳区', city_id: 110000 },
{ id: 110106, name: '丰台区', city_id: 110000 },
{ id: 110107, name: '石景山区', city_id: 110000 },
{ id: 110108, name: '海淀区', city_id: 110000 },
{ id: 110109, name: '门头沟区', city_id: 110000 },
{ id: 110111, name: '房山区', city_id: 110000 },
{ id: 110112, name: '通州区', city_id: 110000 },
{ id: 110113, name: '顺义区', city_id: 110000 },
{ id: 110114, name: '昌平区', city_id: 110000 },
{ id: 110115, name: '大兴区', city_id: 110000 },
{ id: 110116, name: '怀柔区', city_id: 110000 },
{ id: 110117, name: '平谷区', city_id: 110000 },
{ id: 110118, name: '密云区', city_id: 110000 },
{ id: 110119, name: '延庆区', city_id: 110000 },
{ id: 320102, name: '玄武区', city_id: 320100 },
{ id: 320104, name: '秦淮区', city_id: 320100 },
{ id: 320105, name: '建邺区', city_id: 320100 },
{ id: 320106, name: '鼓楼区', city_id: 320100 },
{ id: 320111, name: '浦口区', city_id: 320100 },
{ id: 320113, name: '栖霞区', city_id: 320100 },
{ id: 320114, name: '雨花台区', city_id: 320100 },
{ id: 320115, name: '江宁区', city_id: 320100 },
{ id: 320116, name: '六合区', city_id: 320100 },
{ id: 320117, name: '溧水区', city_id: 320100 },
{ id: 320118, name: '高淳区', city_id: 320100 },
{ id: 320117, name: '溧水区', city_id: 320100 }
];
// ===== ===== ===== 给select填充数据的操作 ===== ===== =====
// 填充province
function addDataProvince() {
var html = "请选择省份";
var length = arr_province.length;
for (var i = 0; i < length; i++) {
html += "" + arr_province[i].name + "";
}
select_province.innerHTML = html;
}
// 填充city
function addDataCity(provinceId) {
var html = "请选择城市";
var length = arr_city.length;
for (var i = 0; i < length; i++) {
var obj = arr_city[i];
if (obj.province_id == provinceId) {
html += "" + obj.name + "";
}
}
select_city.innerHTML = html;
}
// 填充county
function addDataCounty(cityId) {
var html = "请选择区县";
var length = arr_county.length;
for (var i = 0; i < length; i++) {
var obj = arr_county[i];
if (obj.city_id == cityId) {
html += "" + obj.name + "";
}
}
select_county.innerHTML = html;
}
// ===== ===== ===== 给select绑定change事件 ===== ===== =====
// select_province绑定change事件
select_province.onchange = function () {
var provinceId = select_province.value;
addDataCity(provinceId);
};
// select_city绑定change事件
select_city.onchange = function () {
var cityId = select_city.value;
addDataCounty(cityId);
};
// select初始化数据
addDataProvince();
addDataCity(arr_province[0].id);
addDataCounty(arr_city[0].id);
/* 核心思想就是，通过监听上一级的变化获得上级的value，进而改变本级显示的列表内容。*/
效果图如下：

Document
请选择所在的省份
浙江省
山东省
广东省
甘肃省
请选择所在的城市
请选择所在的县区
//按照省份的下拉列表的顺序定义二维数组  将城市列表对应到省份下
var city=[
["杭州市","温州市","宁波市","绍兴市"],//浙江省
["济南市","青岛市","济宁市","潍坊市"],//山东省
["广州市","潮阳","澄海","潮州"],//广东省
["兰州市","白银","敦煌","定西"]//甘肃省
];
//县区数组
var qu=[
[
["杭州一区","杭州二区"],
["温州一区","温州二区"],
["宁波一区","宁波二区"],
["绍兴一区","绍兴二区"]
],
[
["济南一区","济南二区"],
["青岛一区","青岛二区"],
["济宁一区","济宁二区"],
["潍坊一区","潍坊二区"],
],
[
["广州一区","广州二区"],
["潮阳一区","潮阳二区"],
["澄海一区","澄海二区"],
["潮州一区","潮州二区"],
],
[
["兰州一区","兰州二区"],
["白银一区","白银二区"],
["敦煌一区","敦煌二区"],
["定西一区","定西二区"],
]
];
var getProvince = document.forms['theform'].province;
var City = document.forms[0].city;
var Qu = document.forms[0].qu;
function getCity(){
// 初始化
Qu.length = 1;
City.length = 1;
// 获得 省份选择的项(索引值，0开始)
var getSelectIndex = getProvince.selectedIndex;
// 匹配选择省下面的 市区
var proCity = city[getSelectIndex-1]; //
console.log( proCity)
for( var i=0; i
City[i+1] = new Option(proCity[i],getSelectIndex)
}
}
function getQu(){
var getSelectIndex = getProvince.selectedIndex;  // 省
var getCitySelectedIndex = City.selectedIndex; // 市
console.log( getCitySelectedIndex )
var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1];
console.log( cityQu )
for( var i=0; i
Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex)
}
}

前言
插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star
准备
页面中的容器标签不限制，只需给个id就行
var address = new Address({
wrapId: 'wrap',
showArr: ['provinces','citys','areas'],
beforeCreat:function(){
console.log("beforeCreat")
},
afterCreat:function(){
console.log('afterCreat');
}
})
wrapId:"wrap" // 此处的wrap就是上面容器的id
showArr: ['provinces','citys','areas'] // 此处分别代表省、市、区容器的id
举个例子：如果传递的数组['provinces','citys','areas']长度为3，那么将会出现省市区，数组中三个字符串分别是省、市、区容器的id
如传递的数组['provinces','citys']长度为2个，那么将会出现省市，数组中的两个字符串分别是省、市容器的id
如数组长度为1的时候就不说了
beforeCreat 插件开始创建前执行的回调函数
afterCreat 插件创建完成后执行的回调函数
预览
总结
如有什么功能需要增加的，可在评论区留言，我尽量满足。如有什么疏忽或错误，希望您指出。我会尽早修改，以免误导他人。