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


    //跨域请求天气地址
    			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);
    				}
    				
    		 
    				
    		 });
    
  • 相关阅读:
    vi 命令
    element-ui + el-dialog + Vue.component 注册的tinymce富文本控件 第二次及以后打开dialog出现问题解决方法
    【经典数据结构】哈希表
    TCP建立连接与释放连接过程中的几个问题
    【算法题目】求二叉树中节点的最大距离
    字符串处理函数
    [LeetCode] Balanced Binary Tree
    [LeetCode] N-Queens II
    [LeetCode] N-Queens
    【linux使用】bash shell命令行常用快捷键
  • 原文地址:https://www.cnblogs.com/hzy168/p/6703232.html
Copyright © 2020-2023  润新知