<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery天气预报</title>
<style type="text/css">
body{
font-family:sans-serif;
background-color: #000;
}
#wrapper{
margin:0px auto 0px auto;
padding:10px;
width:300px;
}
.pattern{
width:300px;
background:rgba(51,51,51,0.8);
box-shadow:#333 2px 2px 30px;
border-radius:30px;
text-align:left;
color:#f2f2f2;
padding:2px 5px;
vertical-align:2em;
}
li{
list-style:none;
line-height:2.5;
border-bottom:1px #fdf solid;
}
li:nth-child(3n+1){
cursor:pointer;
}
li:nth-child(3n+2){
display:none;
}
li:nth-child(3n){
font-size:12px;
color:#ddf;
}
li:nth-child(2){
display:block;
}
.date{
color:orange;
}
.change {
width: 200px;
height: 25px;
background: none;
font-size: 18px;
font-weight: bold;
color: #fff;
text-align: center;
border: none;
border-bottom: 2px solid white;
}
.change:focus {
outline: none;
border: none;
border-bottom: 2px solid white;
}
.to-top {
display: inline-block;
height: 40px;
width: 40px;
font-size: 22px;
font-weight: 800;
padding: 12px 10px 0px 5px;
color: #fff;
background-color: #f50;
border-radius: 50px;
text-shadow:1px 2px 5px #000;
}
</style>
</head>
<script src="Jquery/jquery-3.2.1.min.js"></script>
<body>
<div id="wrapper">
<center>
<span style="color: #fff;font-size: 22px;">城市:</span><input type="text" class="change" />
</center><br />
<div id="weather" class="pattern"></div>
<a class="to-top">TOP</a>
</div>
<script type="text/javascript">
$(function(){
var city="";
$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',function(){
city = remote_ip_info.city;
weather(city);
$('#weather').on('click','li:nth-child(3n+1)',function(){
console.log($(this).index())
var nextLi=$(this).next();
nextLi.stop(true,true).slideToggle(500);
})
});
$(".change").keypress(function(evt){
var code = evt.keyCode||evt.which;
if (code == 13) {
city = $(this).val();
weather(city);
$(this).val("");
}
}).focus(function(){
layer.tips('回车或双击确认', $(this),{time:0,tips: [2, '#3595CC']});
}).blur(function(){
layer.tips('回车或双击确认', $(this),{time:10,tips: [2, '#3595CC']});
}).dblclick(function(){
city = $(this).val();
weather(city);
$(this).val("");
})
$('.to-top').toTop();
})
function weather(city){
$.ajax({
'url':"http://api.map.baidu.com/telematics/v3/weather?location="+city+"&output=json&ak=HGOUnCXeQLEeywhGOu2jU29PFdC6duFF",
'dataType':'jsonp',
'success':function(dat){
var str='<ul>';
str+='当前城市:'+dat.results[0].currentCity;
for(var i=0,weather=dat.results[0].weather_data,len=weather.length;
i<len;i++){
var tWeather=weather[i];
str+='<li><big class="date">'+tWeather.date+'</big></li>'
+'<li><br />'
+'<img src='+tWeather.dayPictureUrl+'>'
+'<img src='+tWeather.nightPictureUrl+'>'+'<br/>'
+'天气:'+tWeather.weather+'<br/>'
+'风级:'+tWeather.wind+'<br/>'
+'温度:'+tWeather.temperature+'<br/><br/>'
+'</li><li></li>';
}
str+='</ul>'
$('#weather').html(str);
}
});
}
</script>
</body>
</html>
给大家一点福利吧,HTML做的天气预报。(转)
最新推荐文章于 2024-05-03 01:43:28 发布