一个基于jQuery ajax的天气预报小应用

最新推荐文章于 2024-07-31 16:33:32 发布

置顶旺仔520

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量4.1k

点赞数 10

分类专栏： ajax jq 文章标签： javascript ajax jquery jquery ajax 应用

本文链接：https://blog.csdn.net/wangxs520/article/details/78551403

版权

jq 同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

作者：旺仔

这段时间又忙里投了个闲，准备搞点东西玩玩，正好这几天在网上查有没有免费的实时公交接口，发现这些接口都是收费的，因为禳中羞涩，所以还是放弃了，正好同事说他知道一个免费的天气预报api还挺好玩的，便要来玩一玩，做了一个天气预报的小应用，下面是代码，简单易懂：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
<style>
	p,ul{margin: 0;padding: 0;}
	.div{
		width: 50%;
		height: 640px;
		margin:0 auto;
		border: 1px solid #f1f1f1;
	}
	.div h1{
		width: 100%;
		height: 50px;
		background: #f1f1f1;
		line-height: 50px;
		font-size: 23px;
		text-indent: 1.5em;
	}
	.div h1 select{
		float: right;
		margin-top: 17px;
	}
	.div h1>span{
		font-size: 13px;
		color: #3a3939;
	}
	.div .body p{
		width: 50%;
	    float: left;
	    margin: 10px 0 10px 0;
	    text-indent: 2em;
	}
	.div p:last-child{
		width: 100%;
        float: left;
	}
	.body{
		overflow:hidden;
	}
	.forword h2{
		width: 100%;
		height: 50px;
		background: #f1f1f1;
		line-height: 50px;
		font-size: 23px;
		text-indent: 1.5em;
	}
	.forword p{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.forword p span{
		flex: 1;
		text-align: center;
		line-height: 50px;
		border:1px solid #dddddd;
	}
	.forword h2{
		width: 100%;
		height: 50px;
	}
	.forword li{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.forword li span{
		flex: 1;
		text-align: center;
		line-height: 50px;
		border:1px solid #dddddd;
	}
</style>
	<body>
			<div class="div">
				<h1>最新天气实况<span>日期:<span></span></span><select id="select_city"><option>南京</option><option>蚌埠</option><option>南通</option></select></h1>
				<div class="body">
					<p>城市：<span></span></p>
					<p>天气：<span></span></p>
					<p>当前气温：<span></span></p>
					<p>风向：<span></span></p>
					<p>最高气温：<span></span></p>
					<p>最低气温：<span></span></p>
					<p>温馨提醒：<span></span></p>
				</div>
				<div class="forword">
					<h2>未来五天天气预报</h2>
					<p><span>日期</span><span>天气</span><span>最高气温</span><span>风力</span><span>最低气温</span><span>风向</span></p>
					<ul>
						<!--<li><span>16日</span><span>20℃</span><span>3-4级</span><span>20℃</span><span>东南</span></li>-->
					</ul>
				</div>
			</div>
		<script src="../jquery-1.11.2.min.js"></script>
		<script>
                $("#select_city").change(function(){
                	switch ($(this).val()){
                		case "南京":
                	     citykey_val="101190101";
                	     break;
                	    case "蚌埠":
                	     citykey_val="101220201";
                	     break; 
                	     case "南通":
                	       citykey_val="101190501";
                	     break; 
                	};
                	$.ajax({
						url: 'http://wthrcdn.etouch.cn/weather_mini',
						type: 'get',
						data: {
							citykey:citykey_val
						},
				dataType: 'json',
				success: function (resp) {
					console.log(resp);
					var date_data=resp.data.forecast[0].date;
					var data_len=date_data.substr(0,3);
					var data_len_day=date_data.substr(3,3);
					console.log(data_len_day);
					var date1=new Date();
					var dateMon=date1.getMonth()+1;
					var dateDay=date1.getDay();
					$(".div h1 span span").html(dateMon+'月'+data_len+" "+data_len_day);
					$('.body p:first-child span').html(resp.data.city);
					$('.body p:nth-child(2) span').html(resp.data.forecast[0].type);
					$('.body p:nth-child(3) span').html(resp.data.wendu+"℃");
					$('.body p:nth-child(4) span').html(resp.data.forecast[0].fengxiang);
				    $('.body p:nth-child(5) span').html(resp.data.forecast[0].high);
					$('.body p:nth-child(6) span').html(resp.data.forecast[0].low);
					$('.body p:nth-child(7) span').html(resp.data.ganmao);
					$('.forword ul').empty();
					for(var i=0;i<resp.data.forecast.length;i++){
					var str = resp.data.forecast[i].fengli;
					var str_fengli=str.substring(9, str.length - 3)
						var forword_day="<li><span>"+dateMon+'月'+resp.data.forecast[i].date+"</span><span>"+resp.data.forecast[i].type+"</span><span>"+resp.data.forecast[i].high+"</span><span>"+str_fengli+"</span><span>"+resp.data.forecast[i].low+"</span><span>"+resp.data.forecast[i].fengxiang+"</span></li>";
						$('.forword ul').append(forword_day);
					}
				}
	        })
           })
                $('#select_city').change();
			</script>
	</body>
</html>

这里是界面：

这里感谢这位无私将自己api公布与众的好人，虽然我并不知道你是谁；

欢迎各位大神交流经验~

旺仔520

关注

10
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
一个基于jQuery ajax的天气预报小应用

作者：旺仔这段时间又忙里投了个闲，准备搞点东西玩玩，正好这几天在网上查有没有免费的实时公交接口，发现这些接口都是收费的，因为禳中羞涩，所以还是放弃了，正好同事说他知道一个免费的天气预报api还挺好玩的，便要来玩一玩，做了一个天气预报的小应用，下面是代码，简单易懂： p,ul{margin: 0;padding: 0;} .div{ width: 50
复制链接

扫一扫

专栏目录