zoukankan      html  css  js  c++  java
  • 调用第三方天气接口实现天气查询和展示

    //跨域请求天气地址
    			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);
    				}
    				
    		 
    				
    		 });
    
  • 相关阅读:
    黑马程序员——指针的应用
    黑马程序员——C语言基础常量、运算符、函数
    黑马程序员——数组
    黑马程序员——循环结构for,while,do..while
    webView去掉右侧导航条
    使用Eclipse构建Maven的SpringMVC项目
    win7 自动登录
    eclipse 自动提示
    apache+php+mysql 环境配置
    KMP子串查找算法
  • 原文地址:https://www.cnblogs.com/hzy168/p/6703232.html
Copyright © 2011-2022 走看看