天气预报（JSONP跨域）
2020-07-16 05:39
106 查看
利用JSONP跨域完成的预报天气界面
先上效果图：
此处运用的渐变色背景来自 Webgradients
图标来自 Font Awesome
~用到的JSONP接口测试 JSONP接口演示
~也可以使用 在线JSON校验格式化工具 进行JSON校验，个人觉得这个工具很方便。
~我这里使用的天气数据来源：百度
if (city.value) {
//alert(city.value);
var script = document.createElement("script");
var City = city.value;
script.src = `https://api.asilu.com/weather/?city=${City}&callback=weather`;
document.body.appendChild(script);
} else {
alert("请输入要查询的城市名称！");
}
注意${City}用来包含变量City，所在的字符串一定要用反引号( ` ),而不是单引号( ’ )！！！
var keyboard = document.getElementsByTagName("body")[0];
keyboard.onkeypress = function (a) {
a = a || window.event; //ie不支持function参数ev
//alert(ev.keyCode || ev.which); //火狐不支持keyCode
if (a.keyCode == 13) {
if (city.value) {
//alert(city.value);
var script = document.createElement("script");
var City = city.value;
script.src = `https://api.asilu.com/weather/?city=${City}&callback=weather`;
document.body.appendChild(script);
} else {
alert("请输入要查询的城市名称！");
}} else if (city.value) {
alert("请点击回车");
}
};
这部分为加入的键盘事件，输入完城市名称，敲击Enter即可。
注：如果输入城市名称有误，则会显示默认城市（北京市）的天气
源代码：
HTML部分：
@Author NJR10byh <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气查询</title> <link rel="stylesheet" href="Weather.css" type="text/css" /> <link rel="stylesheet" href="./css/font-awesome.css" type="text/css" /> <script src="Weather.js"></script> </head> <body> <div class="Weather-box"> <!--左边部分--> <div class="Weather-left"> <div class="Weather-color"></div> <div class="Date"> <h1 class="Day" id="Date-day">2020-6-1</h1> <h2 class="Week" id="Date-week"> 周五 </h2> <br /> <i class="fa fa-map-marker" aria-hidden="true"></i> <span class="Location" id="Date-location" style="font-weight: bold;" >西安</span > </div> <div class="Author"> <ul> <li> <span class="NJR">NJR10byh</span> </li> </ul> </div> <div class="Weather"> <i class="fa fa-cloud" aria-hidden="true"></i> <div class="Temp"> <p id="Weather-temp">26℃</p> </div> <div class="Weather-txt" id="Weather-info">多云</div> </div> </div> <!--右边部分--> <div class="Weather-right"> <div class="Today-info"> <div class="PM clear"> <span class="txt">PM2.5</span> <span class="data" id="PM25">暂无</span> </div> <div class="Wind-speed clear"> <span class="txt">风向</span> <span class="data" id="Wind">暂无</span> </div> <div class="HU clear"> <span class="txt">城市ID</span> <span class="data" id="cityid">暂无</span> </div> </div> <div class="Weekly-weather"> <ul class="Weekly-list"> <li style="background-color: white; color: #222831;"> <i class="fa fa-sun-o" aria-hidden="true"></i> <span></span> <span class="Weekly-name" id="day1">星期日</span> <span class="Weekly-temp" id="day1-temp">23 ~ 24℃</span> </li> <li> <i class="fa fa-cloud" aria-hidden="true"></i> <span></span> <span class="Weekly-name" id="day2">星期一</span> <span class="Weekly-temp" id="day2-temp">23 ~ 24℃</span> </li> <li> <i class="fa fa-sun-o" aria-hidden="true"></i> <span></span> <span class="Weekly-name" id="day3">星期二</span> <span class="Weekly-temp" id="day3-temp">23 ~ 24℃</span> </li> </ul> </div> <div class="Weather-location"> <input type="text" placeholder="城市" id="city" /> <button class="search" id="search"> <i class="fa fa-location-arrow" aria-hidden="true"></i> <span>查询</span> </button> </div> </div> </div> </body> </html>
CSS部分：
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.clear::after {
content: "";
display: block;
clear: both;
}
body {
width: 100%;
height: 100vh;
background-color: #666;
display: flex;
align-items: center;
justify-content: center;
}
.Weather-box {
width: 730px;
height: 400px;
background-color: #222831;
border-radius: 25px;
box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
color: white;
}
/*左边部分*/
.Weather-box .Weather-left {
position: relative;
width: 300px;
height: 100%;
border-radius: 25px 0 0 25px;
box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2);
float: left;
}
.Weather-box .Weather-left .Author {
position: absolute;
top: 150px;
left: 25px;
border-radius: 10px;
box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.1);
}
.Weather-box .Weather-left .Author li {
float: left;
padding: 15px;
cursor: pointer;
border-radius: 10px;
text-align: center;
transition: 0.5s;
margin-right: 5px;
font-size: 20px;
}
.Weather-box .Weather-left .Author li:hover {
transform: scale(1.1) translateZ(0);
transition: 0.5s;
background: #8a9ec0;
color: #222831;
}
.Weather-box .Weather-left .Weather-color {
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
/*background-image: linear-gradient(135deg, #72edf1 10%, #5151e6 100%);*/
border-radius: 25px 0 0 25px;
opacity: 0.6;
}
.Weather-box .Weather-left .Date {
position: absolute;
top: 25px;
left: 25px;
}
.Weather-box .Weather-left .Date .Day {
display: block;
margin-top: 4px;
color: rgb(81, 215, 248);
}
.Weather-box .Weather-left .Date .Location {
margin-top: 4px;
}
.Weather-box .Weather-left .Weather {
position: absolute;
bottom: 25px;
left: 25px;
}
.Weather-box .Weather-left .Weather i {
font-size: 30px;
}
.Weather-box .Weather-left .Weather .Temp {
font-size: 50px;
font-weight: bold;
color: rgb(207, 240, 21);
}
.Weather-box .Weather-left .Weather .Weather-txt {
font-size: 22px;
font-weight: bold;
color: rgb(245, 221, 4);
}
/*右边部分*/
.Weather-right {
float: right;
padding-top: 25px;
margin-right: 10px;
height: 100%;
box-sizing: border-box;
position: relative;
}
.Weather-right .Today-info {
padding: 15px 15px 2px 15px;
margin: 0 20px 25px 20px;
box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
.Weather-right .Today-info div {
margin-bottom: 10px;
}
.Weather-right .Today-info .txt {
float: left;
}
.Weather-right .Today-info .data {
float: right;
}
.Weekly-list {
margin: 10px 10px;
border-radius: 10px;
box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.4);
}
.Weekly-list .Weekly-name {
margin: 3px auto;
}
.Weekly-list .Weekly-temp {
font-weight: bold;
}
.Weekly-list li {
float: left;
padding: 15px 20px;
cursor: pointer;
border-radius: 10px;
text-align: center;
transition: 0.5s;
margin-right: 10px;
}
.Weekly-list li span {
display: block;
}
.Weekly-list li:hover {
transform: scale(1.1) translateZ(0);
background-color: white;
color: #222831;
transition: 0.5s;
}
.Weather-location input {
border: 0;
border-radius: 5px;
width: 270px;
height: 30px;
margin: 45px 50px 15px 60px;
}
.Weather-location button {
border: 0;
border-radius: 22px;
width: 300px;
display: block;
margin-left: 45px;
height: 35px;
font-size: 15px;
font-weight: bold;
color: white;
transition: 0.4s;
background-color: #fa709a;
}
.Weather-location button:hover {
transition: 0.6s;
/*background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
*/
background-color: #4facfe;
}
JavaScript部分：
window.onload = function () {
var city = document.getElementById("city");
var btn = document.getElementById("search");
alert("欢迎使用天气查询系统 (NJR10byh版)");
btn.onclick = function () {
if (city.value) {
//alert(city.value);
var script = document.createElement("script");
var City = city.value;
script.src = `https://api.asilu.com/weather/?city=${City}&callback=weather`;
document.body.appendChild(script);
} else {
alert("请输入要查询的城市名称！");
}};
var keyboard = document.getElementsByTagName("body")[0]; //加入Enter键盘事件
keyboard.onkeypress = function (a) {
a = a || window.event; //ie不支持function参数ev
//alert(ev.keyCode || ev.which); //火狐不支持keyCode
if (a.keyCode == 13) {
if (city.value) {
//alert(city.value);
var script = document.createElement("script");
var City = city.value;
script.src = `https://api.asilu.com/weather/?city=${City}&callback=weather`;
document.body.appendChild(script);
} else {
alert("请输入要查询的城市名称！");
}} else if (city.value) {
alert("请点击回车");
}
};
};
function weather(data) {
var week = document.getElementById("Date-week");
var day = document.getElementById("Date-day");
var location = document.getElementById("Date-location");
var temp = document.getElementById("Weather-temp");
var info = document.getElementById("Weather-info");
var pm25 = document.getElementById("PM25");
var wind = document.getElementById("Wind");
var cityID = document.getElementById("cityid");
week.innerHTML = data.weather[0].date.slice(0, 3);
day.innerHTML = data.date;
location.innerHTML = data.city;
temp.innerHTML = data.weather[0].temp;
info.innerHTML = data.weather[0].weather;
pm25.innerHTML = data.pm25;
wind.innerHTML = data.weather[0].wind;
cityID.innerHTML = data.id;
var day1 = document.getElementById("day1");
var day2 = document.getElementById("day2");
var day3 = document.getElementById("day3");
var day1temp = document.getElementById("day1-temp");
var day2temp = document.getElementById("day2-temp");
var day3temp = document.getElementById("day3-temp");
day1.innerHTML = data.weather[1].date;
day2.innerHTML = data.weather[2].date;
day3.innerHTML = data.weather[3].date;
day1temp.innerHTML = data.weather[1].temp;
day2temp.innerHTML = data.weather[2].temp;
day3temp.innerHTML = data.weather[3].temp;
}
界面设计部分参考“假前端UP主”
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JSONP跨域jQuery处理整理（附天气数据实例）
- 原生jsonp解决跨域问题例子_获取第三方天气数据
- 关于jsonp访问天气预报功能
- 借助cryptoJS , jsonp跨域，请求心知天气API ，获取天气信息
- 通过jsonp跨域问题制作简单的天气
- 借助cryptoJS , jsonp跨域，请求心知天气API ，获取天气信息
- 使用Ajax、jsonp实现跨域请求调用心知天气API
- 分享下知心天气jsonp跨域访问的代码
- 【实践】基于百度地图API实现的地图形式天气预报【一】
- 基于Jquery的跨域传输数据(JSONP)
- 天气预报接口
- 在ASP.NET MVC3 中利用JSONP跨域登录WEB系统
- 天气预报程序第二篇
- WCF 自托管、无配置文件实现jsonp（跨域）的访问
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据
- 通过script标签实现JSONP跨域调用
- JSONP跨域请求
- swift在线天气预报案例教程
- JSONP跨域请求
- ajxa和jsonp跨域