freecodecamp小项目---城市天气预报查询

1.项目效果展示：

 

输入城市名称，查询相应的天气预报；

 

2.代码

html:

 

天气预报查询

  城市天气查询应用

查询

今日天气

温度:

天气:

风级:

城市:

建议:

游泳指数:

旅行指数:

锻炼指数:

日期:

未来6日天气

温度：

天气：

风级：

日期：

温度：

天气：

风级：

日期：

温度：

天气：

风级：

日期：

温度：

天气：

风级：

日期：

温度：

天气：

风级：

日期：

温度：

天气：

风级：

日期：

 

 

css:

 

/*fonticon*/
@font-face {
  font-family: 'iconfont';  /* project id 288961 */
  src: url('//at.alicdn.com/t/font_dyozraaeu8ppsyvi.eot');
  src: url('//at.alicdn.com/t/font_dyozraaeu8ppsyvi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_dyozraaeu8ppsyvi.woff') format('woff'),
  url('//at.alicdn.com/t/font_dyozraaeu8ppsyvi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_dyozraaeu8ppsyvi.svg#iconfont') format('svg');
}
.city{
	font-family: 'iconfont';
	font-size:45px;
	color:rgb(70, 184, 218);
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

/*reset*/
div,body,p,h2{padding:0;margin:0;}


/*公共样式*/
.main{
	text-align: center;
	width:1000px;
	margin:0 auto;
}
body{
	font-family:楷体;
}
h2{
	font-size: 30px;
	margin-bottom: 20px;
}
.bt{
	border-bottom: 1px solid #f0f0f0;
}
/*页面样式*/
.main .title{
	padding:20px 0;
	font-weight: bold;
	font-size:35px;
	position:relative;
}
.form{
	width:400px;
	position: absolute;
	top:20px;
	right:-65px;
}
.form input{
	padding:7px;border:1px solid red;
	border-radius:3px;
}
.form button{
	background:deepskyblue;
	border:none;
	color:white;
	padding:4px;
	width:40px;
	border-radius: 3px;
	cursor:pointer;
}
.content{width:1000px;}
.future .content div{display: inline-block;width:16%;text-align: left;}
.future,.today{
	padding:15px 0;
}
.future{
	padding-bottom: 30px;
}
.future p{
	margin-bottom: 10px;
}
.today p{
	text-align:left;
	margin-bottom: 10px;
	margin-left: 300px;
}

 

js:

$(document).ready(function(){
	$('.form button').click(function(){
		var city = $('.form input').val();
			
		//将输入的城市名转化为utf-8编码
		function EncodeUtf8(s1)
				{
				      var s = escape(s1);
				      var sa = s.split("%");
				      var retV ="";
				      if(sa[0] != "")
				      {
				         retV = sa[0];
				      }
				      for(var i = 1; i < sa.length; i ++)
				      {
				           if(sa[i].substring(0,1) == "u")
				           {
				               retV += Hex2Utf8(Str2Hex(sa[i].substring(1,5)));
				
				           }
				           else retV += "%" + sa[i];
				      }
				
				      return retV;
				}
		function Str2Hex(s)
				{
				      var c = "";
				      var n;
				      var ss = "0123456789ABCDEF";
				      var digS = "";
				      for(var i = 0; i < s.length; i ++)
				      {
				         c = s.charAt(i);
				         n = ss.indexOf(c);
				         digS += Dec2Dig(eval(n));
				
				      }
				      //return value;
				      return digS;
				}
		function Dec2Dig(n1)
				{
				      var s = "";
				      var n2 = 0;
				      for(var i = 0; i < 4; i++)
				      {
				         n2 = Math.pow(2,3 - i);
				         if(n1 >= n2)
				         {
				            s += '1';
				            n1 = n1 - n2;
				          }
				         else
				          s += '0';
				
				      }
				      return s;
				
				}
		function Dig2Dec(s)
				{
				      var retV = 0;
				      if(s.length == 4)
				      {
				          for(var i = 0; i < 4; i ++)
				          {
				              retV += eval(s.charAt(i)) * Math.pow(2, 3 - i);
				          }
				          return retV;
				      }
				      return -1;
				}
		function Hex2Utf8(s)
				{
				     var retS = "";
				     var tempS = "";
				     var ss = "";
				     if(s.length == 16)
				     {
				         tempS = "1110" + s.substring(0, 4);
				         tempS += "10" + s.substring(4, 10);
				         tempS += "10" + s.substring(10,16);
				         var sss = "0123456789ABCDEF";
				         for(var i = 0; i < 3; i ++)
				         {
				            retS += "%";
				            ss = tempS.substring(i * 8, (eval(i)+1)*8);
				
				
				
				            retS += sss.charAt(Dig2Dec(ss.substring(0,4)));
				            retS += sss.charAt(Dig2Dec(ss.substring(4,8)));
				         }
				         return retS;
				     }
				     return "";
				} 
		var ecity = EncodeUtf8(city);
		$.ajax({
				type:"get",
				//将转化后的城市的utf-8放入请求的url中
				url:"http://v.juhe.cn/weather/index?cityname=" + ecity + "&dtype=&format=&key=383d1c751cfdfb7ac1ffd44c5ebdb344",
				async:true,
				//为了进行跨域请求，设定dataType: 'JSONP'
				dataType: 'JSONP',
				//data为获得的数据对象
				success:function(data){
					var pro = Object.keys(data.result.future);
					$('.today div p:nth-child(1)').text('温度：' + data.result.today.temperature);
					$('.today div p:nth-child(2)').text('天气：' + data.result.today.weather);
					$('.today div p:nth-child(3)').text('风级：' + data.result.today.wind);
					$('.today div p:nth-child(4)').text('城市：' + data.result.today.city);
					$('.today div p:nth-child(5)').text('建议：' + data.result.today.dressing_advice);
					$('.today div p:nth-child(6)').text('游泳指数：' + data.result.today.wash_index);
					$('.today div p:nth-child(7)').text('旅行指数：' + data.result.today.travel_index);
					$('.today div p:nth-child(8)').text('锻炼指数：' + data.result.today.exercise_index);
					$('.today div p:nth-child(9)').text('日期：' + data.result.today.date_y +' ' + data.result.today.week);
					$(".future .content .first p:nth-child(1)").text("温度:" + data.result.future[pro[0]].temperature);
					$(".future .content .first p:nth-child(2)").text("天气:" + data.result.future[pro[0]].weather);
					$(".future .content .first p:nth-child(3)").text("风级:" + data.result.future[pro[0]].wind);
					$(".future .content .first p:nth-child(4)").text("日期:" + data.result.future[pro[0]].date + " " + data.result.future[pro[0]].week);
					$(".future .content .second p:nth-child(1)").text("温度:" + data.result.future[pro[1]].temperature);
					$(".future .content .second p:nth-child(2)").text("天气:" + data.result.future[pro[1]].weather);
					$(".future .content .second p:nth-child(3)").text("风级:" + data.result.future[pro[1]].wind);
					$(".future .content .second p:nth-child(4)").text("日期:" + data.result.future[pro[1]].date + " " + data.result.future[pro[1]].week);
					$(".future .content .third p:nth-child(1)").text("温度:" + data.result.future[pro[2]].temperature);
					$(".future .content .third p:nth-child(2)").text("天气:" + data.result.future[pro[2]].weather);
					$(".future .content .third p:nth-child(3)").text("风级:" + data.result.future[pro[2]].wind);
					$(".future .content .third p:nth-child(4)").text("日期:" + data.result.future[pro[2]].date + " " + data.result.future[pro[2]].week);
					$(".future .content .fourth p:nth-child(1)").text("温度:" + data.result.future[pro[3]].temperature);
					$(".future .content .fourth p:nth-child(2)").text("天气:" + data.result.future[pro[3]].weather);
					$(".future .content .fourth p:nth-child(3)").text("风级:" + data.result.future[pro[3]].wind);
					$(".future .content .fourth p:nth-child(4)").text("日期:" + data.result.future[pro[3]].date + " " + data.result.future[pro[3]].week);
					$(".future .content .fifth p:nth-child(1)").text("温度:" + data.result.future[pro[4]].temperature);
					$(".future .content .fifth p:nth-child(2)").text("天气:" + data.result.future[pro[4]].weather);
					$(".future .content .fifth p:nth-child(3)").text("风级:" + data.result.future[pro[4]].wind);
					$(".future .content .fifth p:nth-child(4)").text("日期:" + data.result.future[pro[4]].date + " " + data.result.future[pro[4]].week);
					$(".future .content .sixth p:nth-child(1)").text("温度:" + data.result.future[pro[5]].temperature);
					$(".future .content .sixth p:nth-child(2)").text("天气:" + data.result.future[pro[5]].weather);
					$(".future .content .sixth p:nth-child(3)").text("风级:" + data.result.future[pro[5]].wind);
					$(".future .content .sixth p:nth-child(4)").text("日期:" + data.result.future[pro[5]].date + " " + data.result.future[pro[5]].week);
				}
			});
	
			
	});
	
	
});