原生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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
js字符串操作方法实例分析
May 06 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 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中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python基础教程之常用运算符
2014/08/29 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python time()的实例用法
2020/11/03 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
外语系毕业生自荐信范文
2013/12/16 职场文书
产品生产计划书
2014/05/07 职场文书
个人课题方案
2014/05/08 职场文书
大学自主招生推荐信
2014/05/10 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
创先争优活动个人总结
2015/03/04 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
工作犯错保证书
2015/05/11 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript