原生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实现动态增加文件域表单
Feb 12 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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与SQL注入攻击[二]
2007/04/17 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
python发布模块的步骤分享
2014/02/21 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python命令行参数用法实例分析
2019/06/25 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
python Gabor滤波器讲解
2020/10/26 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
企业治理工作自我评价
2013/09/26 职场文书
经贸日语毕业生自荐信
2013/11/03 职场文书
模具专业求职信
2014/06/26 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技