作者：旺仔
这段时间又忙里投了个闲，准备搞点东西玩玩，正好这几天在网上查有没有免费的实时公交接口，发现这些接口都是收费的，因为禳中羞涩，所以还是放弃了，正好同事说他知道一个免费的天气预报api还挺好玩的，便要来玩一玩，做了一个天气预报的小应用 ，下面是代码，简单易懂：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
p,ul{margin: 0;padding: 0;}
.div{
width: 50%;
height: 640px;
margin:0 auto;
border: 1px solid #f1f1f1;
}
.div h1{
width: 100%;
height: 50px;
background: #f1f1f1;
line-height: 50px;
font-size: 23px;
text-indent: 1.5em;
}
.div h1 select{
float: right;
margin-top: 17px;
}
.div h1>span{
font-size: 13px;
color: #3a3939;
}
.div .body p{
width: 50%;
float: left;
margin: 10px 0 10px 0;
text-indent: 2em;
}
.div p:last-child{
width: 100%;
float: left;
}
.body{
overflow:hidden;
}
.forword h2{
width: 100%;
height: 50px;
background: #f1f1f1;
line-height: 50px;
font-size: 23px;
text-indent: 1.5em;
}
.forword p{
width: 100%;
height: 50px;
display: flex;
}
.forword p span{
flex: 1;
text-align: center;
line-height: 50px;
border:1px solid #dddddd;
}
.forword h2{
width: 100%;
height: 50px;
}
.forword li{
width: 100%;
height: 50px;
display: flex;
}
.forword li span{
flex: 1;
text-align: center;
line-height: 50px;
border:1px solid #dddddd;
}
</style>
<body>
<div class="div">
<h1>最新天气实况<span>日期:<span></span></span><select id="select_city"><option>南京</option><option>蚌埠</option><option>南通</option></select></h1>
<div class="body">
<p>城市：<span></span></p>
<p>天气：<span></span></p>
<p>当前气温：<span></span></p>
<p>风向：<span></span></p>
<p>最高气温：<span></span></p>
<p>最低气温：<span></span></p>
<p>温馨提醒：<span></span></p>
</div>
<div class="forword">
<h2>未来五天天气预报</h2>
<p><span>日期</span><span>天气</span><span>最高气温</span><span>风力</span><span>最低气温</span><span>风向</span></p>
<ul>
<!--<li><span>16日</span><span>20℃</span><span>3-4级</span><span>20℃</span><span>东南</span></li>-->
</ul>
</div>
</div>
<script src="../jquery-1.11.2.min.js"></script>
<script>
$("#select_city").change(function(){
switch ($(this).val()){
case "南京":
citykey_val="101190101";
break;
case "蚌埠":
citykey_val="101220201";
break;
case "南通":
citykey_val="101190501";
break;
};
$.ajax({
url: 'http://wthrcdn.etouch.cn/weather_mini',
type: 'get',
data: {
citykey:citykey_val
},
dataType: 'json',
success: function (resp) {
console.log(resp);
var date_data=resp.data.forecast[0].date;
var data_len=date_data.substr(0,3);
var data_len_day=date_data.substr(3,3);
console.log(data_len_day);
var date1=new Date();
var dateMon=date1.getMonth()+1;
var dateDay=date1.getDay();
$(".div h1 span span").html(dateMon+'月'+data_len+" "+data_len_day);
$('.body p:first-child span').html(resp.data.city);
$('.body p:nth-child(2) span').html(resp.data.forecast[0].type);
$('.body p:nth-child(3) span').html(resp.data.wendu+"℃");
$('.body p:nth-child(4) span').html(resp.data.forecast[0].fengxiang);
$('.body p:nth-child(5) span').html(resp.data.forecast[0].high);
$('.body p:nth-child(6) span').html(resp.data.forecast[0].low);
$('.body p:nth-child(7) span').html(resp.data.ganmao);
$('.forword ul').empty();
for(var i=0;i<resp.data.forecast.length;i++){
var str = resp.data.forecast[i].fengli;
var str_fengli=str.substring(9, str.length - 3)
var forword_day="<li><span>"+dateMon+'月'+resp.data.forecast[i].date+"</span><span>"+resp.data.forecast[i].type+"</span><span>"+resp.data.forecast[i].high+"</span><span>"+str_fengli+"</span><span>"+resp.data.forecast[i].low+"</span><span>"+resp.data.forecast[i].fengxiang+"</span></li>";
$('.forword ul').append(forword_day);
}
}
})
})
$('#select_city').change();
</script>
</body>
</html>
这里是界面：
这里感谢这位无私将自己api公布与众的好人，虽然我并不知道你是谁；
欢迎各位大神交流经验~