JS源生调用天气事件风向
来源:互联网 发布:淘宝怎么不能找人代付 编辑:程序博客网 时间:2024/05/04 19:06
jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');window.onload=function(){ //请求天气车数据 btn.onclick=function (){ jsonp(createUrl()[0]); jsonp(createUrl()[1]); }};function getCity(){ function city(result){ //去掉城市名后的"市" var city = result.name.substring(0,result.name.length-1); //请求当前城市的天气数据 jsonp(createUrl(city)[0]); jsonp(createUrl(city)[1]); } 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; oSpan[0].innerHTML=data[0].citynm; oSpan[1].innerHTML=data[0].days; oSpan[2].innerHTML=data[0].week; oSpan[3].innerHTML=data[0].weather; oSpan[4].innerHTML=data[0].temperature; oSpan[5].innerHTML=data[0].winp; oSpan[6].innerHTML=data[0].wind; var aDiv = document.getElementsByClassName('future_box'); for(var i=0; i<aDiv.length; i++){ var aSpan = aDiv[i].getElementsByClassName('future_info'); aSpan[0].innerHTML = data[i+1].days; aSpan[1].innerHTML = data[i+1].week; aSpan[2].innerHTML =data[i+1].weather; aSpan[3].innerHTML = data[i+1].temperature; }//根据返回数据,替换不同天气图片 changeImg(response);}function getTodayWeather(response){ var oSpan = document.getElementsByClassName('info'); var data = response.results; oSpan[7].innerHTML=data[0].pm25; oSpan[8].innerHTML=data[0].index[4].zs; oSpan[9].innerHTML=data[0].index[1].zs; oSpan[10].innerHTML=data[0].index[2].zs; oSpan[11].innerHTML=data[0].index[0].zs;}//根据获取到的数据更改页面中相应的图片function changeImg(data){ var firstImg = document.getElementsByTagName("img")[0]; var firstWeatherId=data.result[0].weatid; chooseImg(firstWeatherId,firstImg); var aImg = document.getElementById('future_container').getElementsByTagName('img'); for(var j=0; j<aImg.length; j++){ var weatherId = data.result[j+1].weatid; chooseImg(weatherId,aImg[j]); }}//选择图片function chooseImg(id,index){ switch(id){ case '1': index.src='images/weather_icon/1.png'; break; case '2': index.src='images/weather_icon/2.png'; break; case '3': index.src='images/weather_icon/3.png'; break; case '4': case '5': case '6': case '8': case '9': case '10': case '11': case '12': case '13': case '20': case '22': case '23': case '24': case '25': case '26': index.src='images/weather_icon/4.png'; break; case '7': index.src='images/weather_icon/6.png'; break; case '14': case '15': case '16': case '17': case '18': case '27': case '28': case '29': index.src='images/weather_icon/5.png'; break; case '19': case '21': case '30': case '31': case '32': case '33': index.src='images/weather_icon/7.png'; break; default: index.src='images/weather_icon/8.png'; }}//根据城市名创建请求数据及urlfunction createUrl(){ var cityName = ''; if(arguments.length == 0) { cityName = document.getElementById('text').value; }else{ cityName = arguments[0]; } // console.log(cityName); var urls = []; urls[0] = 'https://sapi.k780.com/?app=weather.future&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=getWeather&weaid=' + encodeURI(cityName); urls[1] = 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=FK9mkfdQsloEngodbFl4FeY3&callback=getTodayWeather&location=' + encodeURI(cityName); return urls;}
阅读全文
0 0
- JS源生调用天气事件风向
- JS调用天气其他杂谈
- 风向
- js调用天气对应城市ID
- 一个查看天气气流风向的网站,很炫
- Js 事件调用顺序。
- js调用点击事件
- C#调用js && js调用C#事件
- 阿里天气数据接口调用实现(Java和JS)
- 获取天气预报相关参数 php (天气,风力,风向,气温等)
- js调用后台服务器端事件
- jsp button事件调用js
- JS调用.net后台事件
- 雅虎天气API调用
- 天气插件调用
- 调用国家气象局天气接口
- 天气展示调用代码
- silverlight 调用天气服务
- 手机号码、邮箱匹配正则表达式java实现练手
- spring-sparkstreaming-kafka10集成实现和疑难杂症解决
- Html 理解
- SQL-sql常用的语句
- Https相关博客
- JS源生调用天气事件风向
- caffe练习实例(2)——cifar10在caffe上训练学习
- java设计模式之命令模式
- Zookeeper + ActiveMQ 集群整合
- 中文乱码在java中URLEncoder.encode方法要调用两次解决
- 反射中常用的一些方法
- Python2.7 图片合成gif
- Leetcode# 136. Single Number(出现一次的数&异或)
- jzoj 3928_射击_堆