原生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 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
数据库的日期格式转换
2006/10/09 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
Three.js基础学习教程
2017/11/16 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
厂办主管岗位职责范本
2014/02/28 职场文书
团队经理竞聘书
2014/03/31 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
绵山导游词
2015/02/05 职场文书
2015年实习单位评语
2015/03/25 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
投标单位介绍信
2015/05/05 职场文书
电台广播稿范文
2015/08/19 职场文书
卖车协议书范文
2016/03/23 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL