想做个直接通过JS获取某个城市的天气。本来想通过直接调用中国气象网的接口:

http://www.weather.com.cn/weather/101070201.shtml,但是跨域问题一直无法解决,有谁知道请告诉我。因而改调用腾讯接口,部分源码如下:

1 function Weather() {};
  2 
  3 Weather.prototype = {
  4     
  5     getWeather: function (city, callback) {
  6         var that = this,
  7             cities = Weather.cityParse(),
  8             code = cities[city] ? cities[city] : 125,                           // 默认使用北京城市
  9             url = 'http://mat1.qq.com/weather/inc/minisite2_' + code + '.js';   // 腾讯天气API jsonp接口
 10 
 11         this.createJsonp(url, function (para) {
 12             var desc = that.weatherParse(para);                                 // 通过jsonp获取天气相关信息
 13             callback(desc);
 14         });
 15     },
 16     // jsonp    

17     createJsonp: function (url, callback) {
 18         var script = document.createElement('script');
 19         script.type = 'text/javascript';
 20         script.src = url;
 21 
 22         script.onreadystatechange = function () {
 23             if (script.readyState === 'loaded' || script.readyState === 'complete') {
 24                 callback(__minisite2__weather__);
 25 
 26                 script.onreadystatechange = null;
 27                 script.onload = null;
 28          }
 29     };
 30 
 31     script.onload = function () {
 32         callback(__minisite2__weather__);
 33         script.onreadystatechange = null;
 34         script.onload = null;
 35     };
 36 
 37     document.body.appendChild(script);
 38     },
 39 
 40     weatherParse: function (para) {
 41                   
 42         try {
 43         var params = para.split(' ');
 44         var weather = {
 45             city: params[0],
 46             temperature: params[1],
 47             range: params[2],
 48             describe: params[3]
 49         };
 50 
 51         return weather;
 52     } catch (e) {
 53         
 54     }
 55     }
 56 };
 57 // 将城市及其对应代码解析成hash形式
 58 Weather.cityParse = function () {
 59     var cities = {},
 60     prop,
 61     code,
 62     item;
 63         
 64     for (prop in this.city) {
 65         item = Weather.city[prop];
 66         for (var city in item) {
 67         if (city !== '_') {
 68             code = item[city];
 69             city = city.slice(0, -1);
 70             cities[city] = code;
 71         }
 72         }
 73     }
 74 
 75     return cities;
 76 };
 77 
 78 Weather.city =  {
 79         "北京市": {
 80             "_": 125,
 81             "北京市": 125
 82         },
 83         "上海市": {
 84             "_": 252,
 85             "上海市": 252
 86         },
 87         "天津市": {
 88             "_": 127,
 89             "天津市": 127,
 90             "塘沽区": 132
 91         },
 92         "重庆市" : {
 93             "_": 212,
 94             "奉节区": 201,
 95             "重庆市": 212,
 96             "涪陵区": 213
 97         },
 98         "香港": {
 99             "_": 1,
100             "香港": 1
101         },
102         "澳门": {
103             "_": 2,
104             "澳门": 2
105         },
106         "台湾省": {
107             "_": 280,
108             "台北市": 280
109         },
110         "云南省": {
111             "_": 179,
112             "昭通市": 173,
113             "丽江市": 174,
114             "曲靖市": 175,
115             "保山市": 176,
116             "大理州": 177,
117             "楚雄州": 178,
118             "昆明市": 179,
119             "瑞丽市": 180,
120             "玉溪市": 181,
121             "临沧市": 182,
122             "思茅市": 184,
123             "红河州": 185,
124             "文山州": 369,
125             "西双版纳州": 370,
126             "德宏州": 371,
127             "怒江州": 372,
128             "迪庆州": 373
129         },
130         "内蒙古": {
131             "_": 69,
132             "呼伦贝尔市": 4,
133             "兴安盟": 7,
134             "锡林郭勒盟": 16,
135             "巴彦淖尔市": 63,
136             "包头市": 64,
137             "呼和浩特市": 69,
138             "锡林浩特市": 99,
139             "通辽市": 101,
140             "赤峰市": 106,
141             "乌海市": 382,
142             "鄂尔多斯市": 383,
143             "乌兰察布市": 384
144         }
145 };
146 // 主要是些事件处理相关的方法包装

147var Util = {

148     addEvent: function (element, type, handler) {
149     if (element.addEventListener) {
150         element.addEventListener(type, handler, false);
151     } else if (element.attachEvent) {
152         element.attachEvent('on' + type, handler);
153     }
154     },
155 
156     getEvent: function (event) {
157     return event || window.event;
158     },
159 
160     getTarget: function (event) {
161     return event.target || event.srcElement;
162     },
163 
164     getComputedStyle: function (element) {
165     if (element.currentStyle) {
166         return element.currentStyle;
167     } else {
168         return document.defaultView.getComputedStyle(element, null);
169     }
170     },
171 
172     getBoundingClientRect: function (element) {
173     var scrollTop = document.documentElement.scrollTop;
174     var scrollLeft = document.documentElement.scrollLeft;
175         
176     if (element.getBoundingClientRect) {
177         if (typeof arguments.callee.offset != 'number') {
178             var temp = document.createElement('div');
179                              temp.style.cssText = 'position: absolute; left: 0; top: 0;';
180                 document.body.appendChild(temp);
181                 arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
182                 document.body.removeChild(temp);
183                 temp = null;
184             }
185             
186             var rect = element.getBoundingClientRect();
187             var offset = arguments.callee.offset;
188             
189             return {
190                 left: rect.left + offset,
191                 rigth: rect.right + offset,
192                 top: rect.top + offset,
193                 bottom: rect.bottom + offset
194             };
195         } else {
196             var offset = this.getElementOffset(element);
197             
198             return {
199                 left: offset.left - scrollLeft,
200                 right: offset.left + element.offsetWidth - scrollLeft,
201                 top: offset.top - scrollTop,
202                 bottom: offset.top + element.offsetWidth - scrollTop
203             };
204         }
205     },
206     
207     getElementOffset: function (element) {
208         var actualLeft = element.offsetLeft;
209         var actualTop = element.offsetTop;
210         var current = element.offsetParent;
211         
212         while (current !== null) {
213             actualLeft += current.offsetLeft;
214             actualTop += current.actualTop;
215             current = current.offsetParent;
216         }
217         
218         return {
219             left: actualLeft,
220             top: actualTop
221         };
222     }
223 };

HTML页面的代码如下:

1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title>weather</title>
  5         <meta http-equiv="Content-Type" content="text/html; charset=gbk;" />
  6         <style type="text/css" >
  7             #city {
  8                 width: 150px;
  9                 heigth: 30px;
 10             }
 11             #inputCity {
 12                 position: absolute;
 13                 width: 130px;
 14                 heigth: 25px;
 15             }
 16         </style>
 17     </head>
 18     <body>
 19         <h1>Weather</h1>
 20         <fieldset>
 21             <legend> 获取时间 </legend>
 22             <label for="city">请选择城市:</label>
 23             <select name="city" id="city">
 24                 <!--<option selected="selected"></option>-->
 25                 <option>北京</option>
 26                 <option>大连</option>
 27                 <option>福州</option>
 28             </select>
 29             <input type="text" id="inputCity" value = '请输入或选择城市' />
 30             <input type="button" id="getWeather" value="获取天气" />
 31         </fieldset>
 32         <div id="showWeather">
 33         
 34         </div>
 35         <script type="text/javascript" src="weather.js"></script>
 36         <script>
 37         (function(){
112             
113             var city = document.getElementById('city');
114             var getWeather = document.getElementById('getWeather');
115             var inputCity = document.getElementById('inputCity');
116             var tip = inputCity.value;
117             var cities = Weather.cityParse();
118             
119             
120             var pos = Util.getBoundingClientRect(city);
121             var volumn = Util.getComputedStyle(city);
122             console.log(pos);
123             
124             // 设置输入文本框的位置
125             inputCity.style.left = pos.left + 'px';
126             inputCity.style.top = pos.top + 'px';
127             
128             Util.addEvent(city, 'change', function (event) {
129                 var value = city.options[city.selectedIndex].value;
130                 inputCity.value = value;
131             });
132             
133             Util.addEvent(inputCity, 'focus', function (event) {
134                 Util.getTarget(event).select();
135             });
136             
137             Util.addEvent(inputCity, 'change', function () {
138                 
139                 var city = inputCity.value;
140                 if ( city.slice(-1) === '市') {
141                     city = city.slice(0, -1);
142                 }
143                 if ( city && !cities[city] ) {
144                     alert('目前无法获取' + city + '的天气,请输入其它城市');
145                 } else if ( !city ) {
146                     inputCity.value = tip;
147                 }
148                 
149             });
150             
151             Util.addEvent(getWeather, 'click', function (event) {
152                 var city = inputCity.value;
153                 if ( city && !cities[city] ) {
154                     alert('目前无法获取' + city + '的天气,请输入其它城市');
155                     return false;
156                 }
157                 // 天气获取
158                 (new Weather()).getWeather(city, function(param){
159                  
160                     var showWeather = document.getElementById('showWeather');
161                     showWeather.innerHTML = '城市:' + param.city + 
162                         '<br /> 温度:' + param.temperature +
163                         '<br />  温度范围:' + param.range +
164                         '<br />  描述:' + param.describe;                       
165                 });
166             }); 
168             
169         })();    
170         </script>
171     </body>
172 </html>

转载于:https://www.cnblogs.com/Gbeniot/p/4266951.html

JS调用腾讯接口获取天气相关推荐

  1. 小程序笔记(9)调用腾讯api获取周边饮食店信息

    调用腾讯api获取周边饮食店信息 实现功能 实现流程 基本逻辑实现 开始注册key 开始代码 先配置app.json中的权限获取 index.wxml index.wxss index.jssssss ...

  2. JS调用百度api接口——实现简单的百度页面

    描述: JS调用百度api接口--实现简单的百度页面 效果: 实现: css文件: @charset "utf-8"; /* CSS Document */ *{margin: 0 ...

  3. vue.js 调用java_Vue.js调用后端java接口的实例代码

    Vue.js调用后端java接口的实例代码 发布于 2020-11-30| 复制链接 分享一篇关于Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧 ...

  4. python通过调用百度天气API接口获取天气信息

    python调用百度接口,获取天气信息 需要到百度注册开发者账号,通过账号获取到每个账号私有的应用访问(AK) 使用此脚本还需要district_id.csv文档,在我资源中可以免费下载,也可在百度天 ...

  5. 用JS通过新浪天气API接口获取天气

    先上代码 从代码中可以看到js是从http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&am ...

  6. JS 使用搜狐接口获取客户端IP地址

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. python调用api接口获取天气数据_python 接口实战--天气API

    1.接口地址: 网页请求: 将结果拷贝到bjson中,格式化为json的格式. 在python中实现天气测试,代码实现. import requests    导入requests库 from url ...

  8. php调用第三方的api,PHP接口编程——调用第三方接口获取天气

    一.根据城市名/id查询天气 二. 三. 四. 实例 //appkey $key='9b1380be63fc20a841c454894651521'; $city='杭州'; //url $url=' ...

  9. 【微信小程序】调用腾讯地图获取当前城市定位

    前导知识 1. 腾讯地图SDK接入 1. 申请开发者密钥 打开网址 https://lbs.qq.com/console/key.html,申请密钥,填写信息单击"提交"按钮,弹出 ...

  10. Android使用和风天气接口获取天气数据在APP中展示天气

    公司APP项目需要能能够显示当前天气,网上找了很多天气数据接口,总结下来要么收费,要么用起来不友好,最后还是用了郭霖推荐的和风天气接口 这里记录一下自己的使用过程 首先注册和风天气个人开发者,认证时间 ...

最新文章

  1. Fibonacii数列,兔子问题
  2. mssql sqlserver in 关键字在值为null的应用举例
  3. 【职场】程序员摆地摊都能月入过万,是真的吗?
  4. eclipse 启动tomcat时弹出错误 Multiple Contexts hava a path of “/xxx”
  5. java drawstring字体大小,JAVA中,drawstring 方法的用法,格式是什么啊
  6. html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?
  7. 客户成功已死,客户服务还活着
  8. 7-10 找最小的字符串 (15 分)
  9. 编程语言 Ruby 如何还能再活 25 年?
  10. Video 视频播放防作弊和禁止下载
  11. Spring Boot 集成 WebSocket,轻松实现信息推送!
  12. 抓包工具Fiddler基本使用
  13. LeetCode 951. Flip Equivalent Binary Trees
  14. cmd命令查看本机网外地址
  15. python手写lfw数据集转pair.txt形式
  16. bin、hex、elf、axf文件的区别
  17. 每天一个linux命令(26):用SecureCRT来上传和下载文件(转载自竹子)
  18. 有位置,来,搬个小板凳,喝酒听故事!
  19. Nii转png,Nii转dcm,Dcm转png
  20. 【SSH框架/国际物流商综平台】-01-分三期(仓储管理,货运全流程管理,决策分析)- 项目背景 界面原型 用例图 企业组织结构 功能模块图 系统框架 项目表单收集

热门文章

  1. 世上没有人能拒绝真诚,只有心存感激的人才能得到幸福和动力
  2. Cmake编译遇到的坑以及解决办法
  3. html导航栏跟随页面滚动,页面滚动时,右侧导航栏跟着对应滚动
  4. 几个氮化镓GaN驱动器PCB设计必须掌握的要点
  5. Windows下Nacos的安装与使用
  6. php 支持opengl,vmware 不支持opengl
  7. 洛谷 P1217回文质数 题解
  8. Web:AJAX的详解
  9. 盛哥学习 Data Guar
  10. 2022-2028年中国油管产业竞争现状及投资策略研究报告