原生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 05 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
JS搜狐面试题分析
Dec 16 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
layui 给数据表格加序号的方法
2018/08/20 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python字符串反转的四种方法详解
2019/12/02 Python
jupyter notebook实现显示行号
2020/04/13 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
创先争优活动方案
2014/02/12 职场文书
应届生自荐信
2014/06/30 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
公务员年度个人总结
2015/02/12 职场文书
导游词之上海豫园
2019/10/24 职场文书
python状态机transitions库详解
2021/06/02 Python
浅谈Redis缓冲区机制
2022/06/05 Redis