一个基于jQuery 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公布与众的好人,虽然我并不知道你是谁;
欢迎各位大神交流经验~
  • 10
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值