<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
.title{
display: flex;
80%;
margin: 20px auto;
}
.title .line{
display: inline-block;
flex: 1;
border-bottom: 1px solid gray;
position: relative;
top: -9px;
}
.title .text{
display: inline-block;
font-size: 10px;
padding:2px 12px;
}
</style>
</head>
<body>
<select name="" id="city">
合肥:101220101
<option value="101240501">宜春</option>
<option value="101010100">北京</option>
<option value="101220101">合肥</option>
<option value="101220801">阜阳</option>
</select>
<button id="btn">查询天气</button>
<div class="title">
<div class="line"></div>
<div class="text">天气预报</div>
<div class="line"></div>
</div>
<div>
<ul id="showData"></ul>
</div>
<script>
var btn =document.querySelector("#btn");
var showdata =document.querySelector("#showData");
btn.onclick=function(){
var citycode =document.querySelector("#city").value;
showdata.innerHTML="";
// 获取select的value值
url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=smartloaddata&code'+citycode;
var script= document.createElement("script");
script.src=url;
document.body.appendChild(script);
}
function smartloaddata(data){
// 回掉函数
console.log(data)
var weather = data.weather;
var tag="";
for (var i=0;i<weather.length;i++){
var date = weather[i].date;
var day = weather[i].info.day;
tag =tag + "日期"+date;
tag=tag+ "<li>白天天气:"+day[1]+"</li>"
tag=tag+ "<li>白天温度:"+day[2]+"</li>"
tag=tag+ "<li>白天风级:"+day[3]+"</li>"
tag=tag+ "<li>白天风级:"+day[4]+"</li>"
}
//字符串拼接
// console.log(weather);
showdata.innerHTML=tag;
}
</script>
</body>
</html>