首页 > 代码库 > 调用第三方天气接口实现天气查询和展示
调用第三方天气接口实现天气查询和展示
//跨域请求天气地址 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); } });
调用第三方天气接口实现天气查询和展示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。