<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>weather</title>
<script type="text/javascript" src="src/script/jquery.min.js"></script>
<style>
ul,li{list-style: none; margin: 0; padding: 0;}
ul{width: 700px;}
ul li{padding:0 10px;height: 30px;border-bottom: 1px solid #ddd;display: flex;justify-content: space-between;align-items: center;}
ul li:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
ul li span{flex: 1 1 auto;}
ul li span img{margin-right: 5px;vertical-align: middle;}
ul li span:nth-child(3){flex: 0 0 130px;}
ul.ul1 li span:first-child{flex: 0 0 200px;}
ul.ul2 li span:first-child{flex: 0 0 200px;}
.ul1 li{background: #ebad24;}
.ul2 li{background: #5ebadd;}
</style>
</head>
<body>
<ul class="ul1"></ul>
<ul class="ul2"></ul>
<script>
$(function () {
var reslutData1,reslutData2;
var city='无锡';
$.ajax({
type: 'GET',
dataType:'jsonp',
url: 'http://api.asilu.com/weather/',
data:{
"city":city
},
success: function(data){
reslutData1=data;
console.log(reslutData1);
var weathers=reslutData1.weather;
var str='';
var iconurl;
for(var i=0;i<weathers.length;i++){
if(weathers[i].weather=='多云'){
iconurl='http://api.map.baidu.com/images/weather/day/duoyun.png';
}else if(weathers[i].weather='阵雨'){
iconurl='http://api.map.baidu.com/images/weather/day/zhenyu.png';
}
str+='<li><span>date:'+weathers[i].date+'</span> ' +
'<span>温度:'+weathers[i].temp+'</span> '+
'<span><img src="'+iconurl+'">'+weathers[i].weather+'</span>'+
'<span>风向:'+weathers[i].wind+'</span></li>';
}
$('.ul1').append(str);
}
})
$.ajax({
type: 'GET',
dataType:'jsonp',
url: 'http://api.map.baidu.com/telematics/v3/weather/',
data:{
"location":city,
"output":"json",
"ak":"*****"
},
success: function(data){
reslutData2=data;
console.log(reslutData2);
var weathers=reslutData2.results[0].weather_data;
var str='';
var iconurl;
for(var i=0;i<weathers.length;i++){
if(weathers[i].weather=='多云'){
iconurl='http://api.map.baidu.com/images/weather/day/duoyun.png';
}else if(weathers[i].weather='阵雨'){
iconurl='http://api.map.baidu.com/images/weather/day/zhenyu.png';
}
str+='<li><span>date:'+weathers[i].date.substr(0,9)+'</span> ' +
'<span>温度:'+weathers[i].temperature+'</span> '+
'<span><img src="'+iconurl+'">'+weathers[i].weather+'</span>'+
'<span>风向:'+weathers[i].wind+'</span></li>';
}
$('.ul2').append(str);
}
})
});
</script>
</body>
</html>
