原生射流研究…实现查询天气小应用

本文实例为大家分享了射流研究…查询天气应用，供大家参考，具体内容如下

https://zsqosos.github.io/weather/人口：

实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。

实现过程：先调用百度地图的应用程序接口来获取用户所在的城市，随后调用聚合数据的天气应用程序接口将数据放在页面上。由于创建交互式、快速动态网页应用的网页开发技术不支持跨域，所以采用了jsonp的方式来调用数据。

实现的原理比较简单，HTML和钢性铸铁比较长，我就只将射流研究…代码贴出来，想看完整代码的朋友可以去我的开源代码库查看https://github.com/zsqosos/weather

//调用jsonp函数请求当前所在城市jsonp(' https://API。地图。百度。com/API？v=2.0ak=dv1n mu 23 D1 SG S9 N2 tuoudeyy 96 dfz h3s=1call back=getCity '；window.onload=function(){ //请求天气车数据BTN。onclick=function(){ jsonp(createURl())；}};函数getCity(){函数city(result){ jsonp(createURl(result。姓名))；} var cityName=new BMap .本地城市()；城市名称。get(城市)；}//数据请求函数函数jsonp(URL){ var script=document。create element(' script ')；script . src=URL document . body . insert before(脚本，文档。尸体。第一个孩子)；document.body.removeChild(脚本);}//数据请求成功回调函数，用于将获取到的数据放入页面相应位置函数getWeather(response){ var OspAN=document。getelementsbyclassname(' info ')；var数据=响应。结果。数据；oSpan[0].innerHTML=数据。实时。城市名称；oSpan[1].innerHTML=数据。实时。日期；oSpan[2].innerHTML='星期data.weather[0].一周；oSpan[3].innerHTML=数据。实时。天气。信息；oSpan[4].innerHTML=数据。实时。天气。温度''；oSpan[5]。innerHTML=数据。实时。风。直接；oSpan[6]。innerHTML=数据。实时。天气。湿气"%";oSpan[7].innerHTML=数据。实时。时间；oSpan[8].innerHTML=数据。生活。信息。紫外仙[0]；oSpan[9].innerHTML=数据。生活。信息。希澈[0]；oSpan[10].innerHTML=数据。生活。信息。kong strio[0]；oSpan[11].innerHTML=data.life.info。传艺[0];var ADiv=文档。getelementsbyclassname(' future _ box ')；for(var I=0；iadiv . lentigi){ var aSpan=ADiv[I].getElementsByClassName(' future _ info ')；aSpan[0].innerHTML=data.weather[i].日期；aSpan[1].innerHTML='星期数据。天气[i].一周；aSpan[2]。innerHTML=数据。天气[我]。信息。第[1]天；aSpan[3]。innerHTML=数据。天气[我]。信息。day[2]''；} changeImg(响应);}//根据获取到的数据更改页面中相应的图片功能更改IMg(数据){ var first IMg=文档。GetElementsBytagname(' IMg ')[0]；var第一天气id=数据。结果。数据。实时。天气。imgchooseImg(第一个天气标识，第一个IMg)；var aImg=文档。getelementbyid(' future _ container ').getElementsByTagName(' img ')；for(var j=0；杰梅格。长度；j){ var Weather id=数据。结果。数据。天气[j]。信息。第[0]天；chooseImg(weatherId，AimG[j])；}}//选择图片函数chooseImg(id，index){ switch(id){ case ' 0 ' : index。src=' images/weather _ icon/1。png '；打破；案例1 ' :指数。src=' images/weather _ icon/2。png '；打破；案例' 2 ' :索引。src=' images/weather _ icon/3。png '；打破；案例' 3 ' :案例' 7 ' :案例' 8 ' :索引。src=' images/weather _ icon/4。png '；打破；案例' 6 ' :索引。src=' images/weather _ icon/6。png '；打破；案例' 13':案例' 14':案例' 15':案例16 ' :指数。src=' images/weather _ icon/5。png '；打破；案例' 33 ' :索引。src=' images/weather _ icon/7。png '；打破；默认：索引。src=' images/weather _ icon/8。png '；}}//根据城市名创建请求数据及URL函数创建URl(){ var city name=' '；if(参数。长度==0){城市名称=文档。getelementbyid(' text ').价值；}else{ cityName=参数[0];} var URL='https://op.juhe.cn/onebox/weather/query？city name=' encodeURI(city name)' key=1053d 001421 b 886 DCE cf 81 a 38422 a 1 a2回调=GetWeather '；返回url}一个简单的小演示，还有很多不足之处，欢迎大家提出改进建议。

明天我会更新一些在这个过程中遇到的问题和解决方法，欢迎关注。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。