给大家一点福利吧，HTML做的天气预报。(转)

最新推荐文章于 2024-05-03 01:43:28 发布

杨传波

最新推荐文章于 2024-05-03 01:43:28 发布

阅读量957

点赞数 1

文章标签：导航博客天气获取位置天气信息

<!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>

杨传波

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
给大家一点福利吧，HTML做的天气预报。(转)

jquery天气预报body{ font-family:sans-serif; background-color: #000;}#wrapper{ margin:0px auto 0px auto; padding:10px; width:300px;}.pattern{ width:300px; background:rgba(51
复制链接

扫一扫