原生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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
JQuery 常用操作代码
Mar 14 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jquery实现弹出层效果实例
May 19 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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发送邮件的问题详解
2015/06/22 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
接收键盘指令的脚本
2006/06/26 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
微信小程序 navbar实例详解
2017/05/11 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python求pi的方法
2014/10/08 Python
python常规方法实现数组的全排列
2015/03/17 Python
python获取本地计算机名字的方法
2015/04/29 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
详解Swift中属性的声明与作用
2016/06/30 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
利用python画出AUC曲线的实例
2020/02/28 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
化工见习报告范文
2014/10/31 职场文书
2019年教师入党申请书
2019/06/27 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android