实例介绍
【实例简介】
【实例截图】
【核心代码】
<html>
<head>
<title>郑州市 - 天气预报</title>
<meta charset="utf-8">
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
text-shadow: 1px 0px 1px #333;
background-image: linear-gradient(to bottom, rgb(13, 104, 188), rgb(114, 173, 224));
background-color: rgb(114, 173, 224);
background-repeat: no-repeat;
text-align: center;
color: white;
}
header{
font-size: 19px;
line-height: 60px;
}
main .icon{
margin: 40px;
background-image: url(days/xue.png);
height: 128px;
background-repeat: no-repeat;
background-position: center center;
}
main .tempers{
font-size: 32px;
font-family: Arial;
}
main sup{
font-size: 19px;
}
main .weather{
font-size: 17px;
}
main .wind{
font-size: 13px;
line-height: 200%;
}
main .current{
font-size: 13px;
}
footer{
width: 90%;
margin: 60px auto 20px auto;
font-size: 13px;
}
section{
width: 33.3333333333333%;
float: left;
border-right: solid 1px #aaf;
box-sizing: border-box;
}
section:nth-child(3){
border: none;
}
section .icon{
height: 60px;
margin: 15px auto;
background-image: url(days/duoyun.png);
background-repeat: no-repeat;
background-size: 60px;
background-position: center center;
opacity: 0.7;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<header>郑州</header>
<main>
<div class="icon"></div>
<div class="tempers"> <span>-13 ~ 2</span><sup>℃</sup></div>
<div class="weather">小雪</div>
<div class="wind">微风</div>
<div class="current">实时温度：13℃，空气指数 135 轻度污染</div>
</main>
<footer>
<section>
<div class="week">周二</div>
<div class="icon"></div>
<div class="temper">13 ~ 5℃</div>
<div class="weather">晴</div>
<div class="wind">微风</div>
</section>
<section>
<div class="week">周三</div>
<div class="icon"></div>
<div class="temper">13 ~ 5℃</div>
<div class="weather">晴</div>
<div class="wind">微风</div>
</section>
<section>
<div class="week">周四</div>
<div class="icon"></div>
<div class="temper">13 ~ 5℃</div>
<div class="weather">晴</div>
<div class="wind">微风</div>
</section>
<div style="clear:left;"></div>
</footer>
<script>
jQuery.getJSON('http://api.map.baidu.com/telematics/v3/weather?location=石家庄市&output=json&ak=iw5m2G7ayDow8ofDdDGVUMB3&mcode=com.BaiduWeather&callback=?', function(data){
var r = data.results[0];
var city = r.currentCity;
var pm25 = r.pm25;
var datas = r.weather_data;
var today = datas[0];
var pic = today.dayPictureUrl.substring(today.dayPictureUrl.lastIndexOf('/'));
$('header').text(city);
$('main .icon').css('background-image', 'url(days' pic ')');
var tempers = today.temperature.replace('℃', '');
$('main .tempers span').text(tempers);
$('main .weather').text(today.weather);
$('main .wind').text(today.wind);
var temper = today.date.substring(today.date.indexOf('：'));
temper = temper.replace(')', '');
var current = '实时温度' temper '，空气指数 ' pm25 ' ' getAPIName(pm25);
$('main .current').text(current);
var days = $('section');
for(var i = 1; i < 4; i ){
var day = days.get(i - 1);
var data = datas[i];
$('.week', day).text(data.date);
$('.temper', day).text(data.temperature);
$('.wind', day).text(data.wind);
$('.weather', day).text(data.weather);
var pic = data.dayPictureUrl.substring(data.dayPictureUrl.lastIndexOf('/'));
$('.icon', day).css('background-image', 'url(days' pic ')');
}
});
//使用者传入的值 函数返回的值
//pm25 ———> 空气污染程度
function getAPIName(pm25){
var api;
if (pm25 <= 50) api = '优';
if (pm25 >= 51 && pm25 <= 100) api = '良';
if (pm25 >= 101 && pm25 <= 150) api = '轻微污染';
if (pm25 >= 151 && pm25 <= 200) api = '轻度污染';
if (pm25 >= 201 && pm25 <= 300) api = '中度污染';
if (pm25 > 300) api = '重度污染';
if (pm25 > 500) api = '已爆表！';
return api;
}
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论