原生js实现查询天气小应用


Posted in Javascript onDecember 09, 2016

本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下

demo:  https://zsqosos.github.io/weather/

原生js实现查询天气小应用

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

实现过程:先调用百度地图的API来获取用户所在的城市,随后调用聚合数据的天气API将数据放在页面上。由于ajax不支持跨域,所以采用了jsonp的方式来调用数据。

实现的原理比较简单,HTML和css比较长,我就只将js代码贴出来,想看完整代码的朋友可以去我的github查看 https://github.com/zsqosos/weather

//调用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('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<aImg.length; 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,还有很多不足之处,欢迎大家提出改进建议。

明天我会更新一下在这其中遇到的一些问题以及解决方法,欢迎关注。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
jquery插件之easing使用
Aug 19 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
JS实现太极旋转思路分析
Dec 09 #Javascript
学习使用bootstrap的modal和carousel
Dec 09 #Javascript
PHP+jquery+ajax实现分页
Dec 09 #Javascript
javascript垃圾收集机制的原理分析
Dec 08 #Javascript
基于JS实现的随机数字抽签实例
Dec 08 #Javascript
利用js+css+html实现固定table的列头不动
Dec 08 #Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 #Javascript
You might like
php多层数组与对象的转换实例代码
2013/08/05 PHP
js select常用操作控制代码
2010/03/16 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python实现拼图小游戏
2020/02/22 Python
Python如何实现定时器功能
2020/05/28 Python
python脚本和网页有何区别
2020/07/02 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
黄河象教学反思
2014/02/10 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
应届大学生求职信
2014/07/20 职场文书
初中同学会致辞
2015/08/01 职场文书
导游词之天下银坑景区
2019/11/21 职场文书