天气预报

来源：互联网发布：淘宝曲度腰椎治疗仪编辑：程序博客网时间：2024/06/15 00:48

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<style>
*{
margin: 0;
padding: 0;
outline: none;
list-style: none;
}
.box{
text-align: center;
width: 1000px;
margin: 50px auto;
/*padding: ;*/
}
p{
height: 50px;
line-height: 50px;
}
input{
height: 30px;
padding: 10px;
cursor: pointer;
}
.btn{
margin-left: 20px;
text-align: center;
background: cornflowerblue;
border: 1px solid transparent;
width: 80px;
color: white;
}
.title{
font-size: 48px;
margin-bottom: 25px;
}
ul li{
float: left;
width: 140px;
}
.now{
width: 160px;
}
/*ul{
float: left;
}*/
.weatherbox{
/*color: ;*/
margin-top:50px;
overflow: hidden;
background:linear-gradient(
to bottom,#6495ED,#fff
);
}
.weatherboxNow{
background:linear-gradient(
to bottom,#ccc,#fff
);
}
.weatherbox p.g{
text-align: left;
}
ul li p{
position: relative;
height: 70px;
overflow: hidden;
}
ul li p img{
display: block;
position: absolute;
top: 0;
left: 50%;
margin-left: -25px;
}
.empty{
/*display: inline-block;*/
height: 70px;
}
</style>
<script src="template/template-native.js"></script>
</head>
<body>
<div class="box">
<p class="title">天气预报</p>
<p>请输入城市名：<input type="text"/><input type="text" value="查询" class="btn"/></p>
<div class="weatherbox"></div>
</div>
<script type="text/template" id="tpl">
<p class="g"><%=res.today.date_y%></p>
<ul>
<li class="now">
<p class="empty"></p>
<p class="empty"></p>
<%if(res.today.weather[res.today.weather.length-1]=="晴") {%>
<p><img src="img/5.png"/></p>
<%}else if(res.today.weather[res.today.weather.length-1]=="云"){%>
<p><img src="img/3.png"/></p>
<%}else if(res.today.weather[res.today.weather.length-1]=="雨"){%>
<p><img src="img/8.png"/></p>
<%}%>
<p><%=res.today.temperature%></p>
<p><%=res.today.weather%></p>
<p><%=res.today.wind%></p>
</li>

<% for(var i=1;i<res.future.length;i++){ %>
<li>
<p><%=res.future[i].week%></p>
<p><%=res.future[i].date.slice(4,6)%>月<%=res.future[i].date.slice(6)%></p>
<%if(res.future[i].weather[res.future[i].weather.length-1]=="晴") {%>
<p><img src="img/5 (1).png"/></p>
<%}else if(res.future[i].weather[res.future[i].weather.length-1]=="云"){%>
<p><img src="img/3.png"/></p>
<%}else if(res.future[i].weather[res.future[i].weather.length-1]=="雨"){%>
<p><img src="img/8.png"/></p>
<%}%>
<p><%=res.future[i].temperature%></p>
<p><%=res.future[i].weather%></p>
<p><%=res.future[i].wind%></p>
</li>

<%}%>
</ul>
</script>
<script>
var dataTpl;
var city=document.getElementsByTagName('input')[0];

var btn=document.getElementsByTagName("input")[1];

btn.onclick=function(){
document.getElementsByTagName("div")[1].innerHTML="";
var cityStr=encodeURIComponent(city.value);
ajax({
"dataType":"jsonp",
"type":"get",
"url":"http://v.juhe.cn/weather/index",
"data":{
"format":2,
"cityname":encodeURIComponent(city.value),
"key":"您申请的key"
},
"success":function(data){
dataTpl={"res":data.result};
var html=template("tpl",dataTpl);
document.getElementsByTagName("div")[1].innerHTML=html;
}
})
}

</script>
</body>
</html>

阅读全文

1 0