<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul li{
list-style: none;
}
.container{
width: 1000px;
height: 500px;
background-color: #8bc34a;
margin:0 auto;
margin-top: 100px;
position: relative;
padding-top:20px;
}
label{color:white;margin-left: 50px;}
input{
width: 190px;
height: 30px;
line-height: 30px;
outline: none;
border: none;
margin-left: 20px;
padding-left:10px;
}
button{
outline: none;
border: none;
margin-left: 30px;
width: 105px;
height: 30px;
line-height: 30px;
background-color:pink;
color: white;
text-align: center;
}
p{
width: 500px;
height: 60px;
line-height: 60px;
color: white;
margin-left: 240px;
margin-top: 20px;
text-align: center;
font-family: "微软雅黑";
font-size: 18px;
}
#right ul{
margin-top: 80px;
float:left;
margin-left: 100px;
}
#right ul li{
width: 120px;
height:236px;
float: left;
border-left: 1px dashed white;
}
#right span {
width: 110px;
float: left;
margin-top: 10px;
color: white;
font-size: 12px;
padding-left: 10px;
}
.daypic, .nightpic{
width: 24px;
height: 24px;
float: left;
margin-left: 4px;
}
#right ul li .day_weather {
width: 50px;
margin-top: 2px;
}
#right ul li .night_weather {
width: 50px;
margin-top: 2px;
}
.daypic img, .nightpic img{
width: 24px;
height: 24px;
}
#right .day,#rightt .night,#right .date{
text-align: center;
font-size: 10px;
}
#right ul li .day, #right ul li .night{
color:#175690;
}
</style>
</head>
<body>
<div class="container">
<label>请输入您要查询的城市： <input type="text" id="get"></label>
<button id="btn">点击查看7天</button>
<p id="cue"></p>
<div id="right">
<ul id="list">
<li v-for="x in arr">
<span class="date">{{obj[x]["day"]}}</span>
<span class="day">白天</span>
<img class="daypic" v-bind:src="obj[x].day_weather_pic">
<span class="day_weather">{{obj[x]["day_weather"]}}</span>
<span class="day_wind_direction">{{obj[x]["day_wind_direction"]}}</span>
<span class="day_wind_power">{{obj[x]["day_wind_direction"]}}</span>
<span class="night">晚上</span>
<img class="nightpic" v-bind:src="obj[x].night_weather_pic"></span>
<span class="night_weather">{{obj[x]["night_weather"]}}</span>
<span class="night_wind_direction">{{obj[x]["night_wind_direction"]}}</span>
<span class="night_wind_power">{{obj[x]["night_wind_power"]}}</span>
</li>
</ul>
</div>
</div>
<script>
var app=new Vue({
el:"#right",
data:{
obj:{},
arr:[]
},
created:function(){
var this_=this;
btn.onclick=function(){
value=get.value;
weather(value);
}
function weather(area){
var xhr=new XMLHttpRequest();
xhr.open("GET", "http://route.showapi.com/9-2?showapi_appid=50131&showapi_sign=ddfdd446a29e41d69349c20644491331&area="+area+"&needMoreDay=1&needIndex=0&needHourData=0&need3HourForcast=0&needAlarm=0&" )
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
var obj=JSON.parse(xhr.responseText);
var obj1=obj.showapi_res_body;
// console.log(obj1)
// for(x in obj1){
// console.log(x);
// }
this_.obj=obj1;
var arr=["f1","f2","f3","f4","f5","f6","f7"];
this_.arr=arr;
this_.cue=value;
cue.innerHTML="您查找的是"+value+"近七天的天气预报！";
}
}
}
},
})
</script>
</body>
</html>
网友评论