调用第三方天气接口实现天气查询和展示

Posted 2020-09-10 hzy168

//跨域请求天气地址
			var crossDaomainRequest = {
				createCORS: function(method, url) {
					var xhr = new XMLHttpRequest();
					if(‘withCredentials‘ in xhr) {
						xhr.open(method, url, true);
					} else if(typeof XDomainRequest != ‘undefined‘) {
						var xhr = new XDomainRequest();
						xhr.open(method, url);
					} else {
						xhr = null;
					}
					return xhr;
				},
				get: function(url, callback) {
					var request = this.createCORS(‘get‘, url);
					if(request) {
						request.onload = function() {
							callback(request.response? request.response: request.responseText)
						};
						request.send();
					}
				}
			};

			crossDaomainRequest.get(‘http://wthrcdn.etouch.cn/WeatherApi?citykey=101100301‘, function(result) {				
				 var elements = $(result);	
				  if (elements.length > 0) {
		            var cityName = elements.find("city").text();  //当前城市
		            var updateTtime = elements.find("updatetime").text(); //更新时间 
		            var wendu = elements.find("wendu").text();  //温度
		            var shidu = elements.find("shidu").text();  //湿度
		            var fengxiang = elements.find("fengxiang").first().text(); //风向
		            var fengli = elements.find("fengli").first().text();  //风力
		            var weatherToday = elements.find("weather").first(); //天气详情包含白天和夜晚
		            var date = weatherToday.find("date").text(); //天气详情包含白天和夜晚
		            var high = weatherToday.find("high").text().replace("高温", "").replace("℃","").replace(" ","");
		            var low = weatherToday.find("low").text().replace("低温", "").replace("℃", "").replace(" ", "");
		            //alert(high+‘~‘+low)
		            var dayType = weatherToday.find("day").find("type").text();
		            var dayfengxiang = weatherToday.find("day").find("fengxiang").text();
		            var dayfengli = weatherToday.find("day").find("fengli").text();

		            var nightType = weatherToday.find("night").find("type").text();
		            var nightfengxiang = weatherToday.find("night").find("fengxiang").text();
		            var nightfengli = weatherToday.find("night").find("fengli").text();
		            var dImageUrl = ("/Scripts/Bus/DynamicDiagnosis/images/weather/" + dayType + ".gif");  //白天天气的图片 
		            var nImageUrl = ("/Scripts/Bus/DynamicDiagnosis/images/weather/n" + nightType + ".gif");
		            var strTmplate = "<div class=\"weather-icon\">" +
		                "<span class=\"day-icon\" style=\"background-image:url(" + dImageUrl + "); background-size: 100% 100%; \" title=\"白天:" + dayType + " " + dayfengxiang + " " + dayfengli + "\" ></span>" +
		                "<span class=\"night-icon\" style=\"background-image:url(" + nImageUrl + "); background-size: 100% 100%; \" title=\"夜间:" + nightType + " " + nightfengxiang + " " + nightfengli + "\"></span>" +
		                "</div>" +
		                "<div class=\"w-left\">" +
		                "<h2>今日天气<span>" + cityName + "</span></h2>" +
		                "<dl class=\"temperature clearfix\">" +
		                " <dt >" + low + "~" + high + "</dt>" +
		                    "<dd>" + "℃ " + fengxiang + fengli+
		                        "<div>白天:" + dayType + " " + dayfengxiang + " " + dayfengli + "</div>" +                          
		                       " </dd>" +
		                " </dl>" +
		                "<div class=\"realtime-tem\" style=\"font-size:12px;\">" + (new Date().getMonth() + 1) + "月" + date + "（实时：" + wendu + "℃,湿度:" + shidu + "）</div>" +
		            "</div>";
		            $(document.body).html(strTmplate);
				}
				
		 
				
		 });