原生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 读取元素的CSS信息的代码
Feb 07 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
vue封装数字翻牌器
Apr 20 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
python实现文本文件合并
2015/12/29 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
会计自我鉴定
2013/11/02 职场文书
大学运动会通讯稿
2014/01/28 职场文书
合作意向书范本
2014/03/31 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书