JS实现天气预报查询

样品展示

HTML

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>全国天气查询小应用</title><link rel="stylesheet" href="weather.css"/><link rel="icon" href="favicon.ico"/></head>
<body>
<audio  autoplay loop="loop"><source src="mp3/海为气象园.mp3">
</audio><header><h1><font face='cursive' color='white'><b>❄ 海为气象园 ❄</b></font></h1><div id="weather_search"><span><input id="text" type="text" placeholder="请输入您要查询的城市" /></span><span><input id="btn" type="button" value=" 查询天气" /></span></div>
</header><section><font color='white'><div id="today_container"><div><img src="./images/weather_icon/1.png" alt="今日天气"/></div><p><font size='30'color='white'><b>☀ ☁ ☂ ❄</b></font></p><div><div class="main_info"><span class="info">城市</span>|<span class="info">201X-XX-XX</span>|<span class="info">星期X</span>|<span class="info">---</span> </div><div class="more_info">今日温度：<span class="info">-----</span>风力：<span class="info">-----</span>风向：<span class="info">-----</span>PM2.5：<span class="info">--</span></div></div></div><div id="future_container"><div class="future_box"><img src="./images/weather_icon/1.png" alt="天气"/><span class="future_info">201X-XX-XX</span><span class="future_info">星期X</span><span class="future_info">--</span><span class="future_info">12-16℃</span></div><div class="future_box"><img src="./images/weather_icon/3.png" alt="天气"/><span class="future_info">201X-XX-XX</span><span class="future_info">星期X</span><span class="future_info">--</span><span class="future_info">12-16℃</span></div><div class="future_box"><img src="./images/weather_icon/2.png" alt="天气"/><span class="future_info">201X-XX-XX</span><span class="future_info">星期X</span><span class="future_info">--</span><span class="future_info">12-16℃</span></div><div class="future_box"><img src="./images/weather_icon/4.png" alt="天气"/><span class="future_info">201X-XX-XX</span><span class="future_info">星期X</span><span class="future_info">--</span><span class="future_info">12-16℃</span></div><div class="future_box"><img src="data:images/weather_icon/5.png" alt="天气"/><span class="future_info">201X-XX-XX</span><span class="future_info">星期X</span><span class="future_info">-</span><span class="future_info">12-16℃</span></div></div></font></section><footer><div>design and code by zsq</div></footer><script src="index.js"></script><div style="text-align:center;"></div></body>
</html>`在这里插入代码片`

CSS

body,div,h1,h2,h3,h4,h5,h6,input,header,main,ul,li,footer,p,span,section{padding: 0;margin: 0;
}
html,body{height: 100%;min-width: 960px;
}
body{background: url(images/bg.jpg) no-repeat;font-size: 14px;font-family: "microsoft yahei";-webkit-background-size: 100%;background-size: 100%;color: #222;
}
header{height: 50px;padding-left: 80px;background: rgba(100, 100, 100, 0.6);
}
h1{padding-right: 30px;line-height: 50px;font-size: 30px;float: left;
}
#weather_search{margin-top: 10px;float: left;
}
#weather_search span{height: 30px;float: left;
}
#text{padding: 0 6px 0 6px;background: #fff;font-size: 14px;width: 240px;height: 30px;border: none;outline: none;
}
#btn{width: 70px;height: 30px;border: none;background: rgba(255,255,255,0.5);color: #333;outline: none;cursor: pointer;
}
#btn:hover{background: rgba(255, 255, 255, 0.3);
}
section{padding-top: 90px;
}
#today_container{width: 900px;margin: 0 auto;padding: 20px;background: rgba(100,100,100,0.3);overflow: hidden;
}
#today_container div img {margin: 0 50px 0 40px;float: left;
}.main_info{font-size: 24px;margin-bottom: 10px;
}.main_info span{margin: 0 15px;
}.main_info span:first-child{margin-left: 0;
}.more_info {margin-top: 3px;font-size: 16px;
}.more_info span{margin: 0 15px 0 0;
}
#future_container{margin: 80px auto 0 auto;width: 950px;text-align: center;overflow: hidden;
}
#future_container div{float: left;width: 150px;padding: 20px 0;margin: 0 20px;background: rgba(100, 100, 100, 0.3);
}
#future_container div:hover{background: rgba(200,200,200,0.5);
}
#future_container div span{display: block;
}
footer{position: absolute;bottom: 0;width: 100%;
}
footer div{width: 175px;margin: 0 auto;
}

JS

/*** Created by zsq on 2016/11/13.*/
//调用jsonp函数请求当前所在城市
jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');
window.onload = function () {//请求天气车数据btn.addEventListener('click',function () {jsonp(createUrl()[0]);jsonp(createUrl()[1]);});text.addEventListener('keydown', function (e){if (e.keyCode == 13) {jsonp(createUrl()[0]);jsonp(createUrl()[1]);}});
}function getCity() {function city(result) {//去掉城市名后的"市"var city = result.name.substring(0, result.name.length - 1);//请求当前城市的天气数据jsonp(createUrl(city)[0]);jsonp(createUrl(city)[1]);}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;oSpan[0].innerHTML = data[0].citynm;oSpan[1].innerHTML = data[0].days;oSpan[2].innerHTML = data[0].week;oSpan[3].innerHTML = data[0].weather;oSpan[4].innerHTML = data[0].temperature;oSpan[5].innerHTML = data[0].winp;oSpan[6].innerHTML = data[0].wind;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[i + 1].days;aSpan[1].innerHTML = data[i + 1].week;aSpan[2].innerHTML = data[i + 1].weather;aSpan[3].innerHTML = data[i + 1].temperature;}//根据返回数据，替换不同天气图片changeImg(response);
}function getTodayWeather(response) {var oSpan = document.getElementsByClassName('info');var data = response.results;oSpan[7].innerHTML = data[0].pm25;oSpan[8].innerHTML = data[0].index[4].zs;oSpan[9].innerHTML = data[0].index[1].zs;oSpan[10].innerHTML = data[0].index[2].zs;oSpan[11].innerHTML = data[0].index[0].zs;
}//根据获取到的数据更改页面中相应的图片
function changeImg(data) {var firstImg = document.getElementsByTagName("img")[0];var firstWeatherId = data.result[0].weatid;chooseImg(firstWeatherId, firstImg);var aImg = document.getElementById('future_container').getElementsByTagName('img');for (var j = 0; j < aImg.length; j++) {var weatherId = data.result[j + 1].weatid;chooseImg(weatherId, aImg[j]);}
}//选择图片
function chooseImg(id, index) {switch (id) {case '1':index.src = 'images/weather_icon/1.png';break;case '2':index.src = 'images/weather_icon/2.png';break;case '3':index.src = 'images/weather_icon/3.png';break;case '4':case '5':case '6':case '8':case '9':case '10':case '11':case '12':case '13':case '20':case '22':case '23':case '24':case '25':case '26':index.src = 'images/weather_icon/4.png';break;case '7':index.src = 'images/weather_icon/6.png';break;case '14':case '15':case '16':case '17':case '18':case '27':case '28':case '29':index.src = 'images/weather_icon/5.png';break;case '19':case '21':case '30':case '31':case '32':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 urls = [];urls[0] = 'https://sapi.k780.com/?app=weather.future&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=getWeather&weaid=' + encodeURI(cityName);urls[1] = 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=FK9mkfdQsloEngodbFl4FeY3&callback=getTodayWeather&location=' + encodeURI(cityName);return urls;
}

JS实现天气预报查询相关推荐

html+js 实现天气,JS实现天气预报查询
样品展示 HTML 全国天气查询小应用 ❄ 海为气象园 ❄ ☀ ☁ ☂ ❄ 城市|201X-XX-XX|星期X|--- 今日温度:-----风力:-----风向:-----PM2.5:-- 201X- ...
html js获取天气预报,原生JS实现天气预报
本文实例为大家分享了JS实现天气预报的具体代码,供大家参考,具体内容如下 HTML代码 content="width=device-width, user-scalable=no, init ...
axis WebServices 完美调用天气预报,查询、显示代码！
axis WebServices 完美调用天气预报,查询.显示代码! 效果: jsp页面: <%@ page language="java" import="ja ...
Python天气预报查询
功能: 实现城市天气预报查询,并提供未来四天查询两个网站接口,直接返回数据,之后对数据进行读取和处理,很简单的小程序效果图: 代码实现: import urllib.request import ...
Delphi天气预报查询
Delphi天气预报查询现在的很多软件中都内置了天气查看这个功能!其实呢,这个功能的实现并不麻烦!会上网的人,都会查天气情况!其实那些内置天气预报功能的软件的天气预报功能也都是来源于网上!因为也没有 ...
免费天气预报查询 API、历史天气查询 API 接口使用示例【源码可用】
天气预报查询 API.历史天气查询 API 接口使用示例[源码可用] 福利彩蛋:没有好玩的 API 接口?上百款免费接口等你来,免费 API,免费 API 大全一.免费天气预报查询 API 通过城市 ...
【附源码】计算机毕业设计SSM天气预报查询管理系统
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
天气预报查询数据接口、实时天气、24小时天气、未来24小时、7天/15天预报
小编在此向大家介绍拥有105亿+调用量的产品,该接口文档清晰,对接方便,服务超好. 一.接口介绍通过坐标区域.IP.地名.景点名称.电话区号或邮编等有效信息可查询天气情况(天气状况.湿度.天气图标. ...
APISpace 天气预报查询API
今天就来和大家说说 APISpace 的天气预报查询API,它支持全国以及全球多个城市的天气查询,包含国内3400+个城市以及国际4万个城市的实况数据:更新频率分钟级别. 这套API商品包含以下AP ...

JS实现天气预报查询

HTML

CSS

JS

JS实现天气预报查询相关推荐

最新文章

热门文章