JS调用腾讯接口获取天气
想做个直接通过JS获取某个城市的天气。本来想通过直接调用中国气象网的接口:
http://www.weather.com.cn/weather/101070201.shtml,但是跨域问题一直无法解决,有谁知道请告诉我。因而改调用腾讯接口,部分源码如下:
![](/assets/blank.gif)
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 };
![](/assets/blank.gif)
HTML页面的代码如下:
![](/assets/blank.gif)
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调用腾讯接口获取天气相关推荐
- 小程序笔记(9)调用腾讯api获取周边饮食店信息
调用腾讯api获取周边饮食店信息 实现功能 实现流程 基本逻辑实现 开始注册key 开始代码 先配置app.json中的权限获取 index.wxml index.wxss index.jssssss ...
- JS调用百度api接口——实现简单的百度页面
描述: JS调用百度api接口--实现简单的百度页面 效果: 实现: css文件: @charset "utf-8"; /* CSS Document */ *{margin: 0 ...
- vue.js 调用java_Vue.js调用后端java接口的实例代码
Vue.js调用后端java接口的实例代码 发布于 2020-11-30| 复制链接 分享一篇关于Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧 ...
- python通过调用百度天气API接口获取天气信息
python调用百度接口,获取天气信息 需要到百度注册开发者账号,通过账号获取到每个账号私有的应用访问(AK) 使用此脚本还需要district_id.csv文档,在我资源中可以免费下载,也可在百度天 ...
- 用JS通过新浪天气API接口获取天气
先上代码 从代码中可以看到js是从http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&am ...
- JS 使用搜狐接口获取客户端IP地址
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- python调用api接口获取天气数据_python 接口实战--天气API
1.接口地址: 网页请求: 将结果拷贝到bjson中,格式化为json的格式. 在python中实现天气测试,代码实现. import requests 导入requests库 from url ...
- php调用第三方的api,PHP接口编程——调用第三方接口获取天气
一.根据城市名/id查询天气 二. 三. 四. 实例 //appkey $key='9b1380be63fc20a841c454894651521'; $city='杭州'; //url $url=' ...
- 【微信小程序】调用腾讯地图获取当前城市定位
前导知识 1. 腾讯地图SDK接入 1. 申请开发者密钥 打开网址 https://lbs.qq.com/console/key.html,申请密钥,填写信息单击"提交"按钮,弹出 ...
- Android使用和风天气接口获取天气数据在APP中展示天气
公司APP项目需要能能够显示当前天气,网上找了很多天气数据接口,总结下来要么收费,要么用起来不友好,最后还是用了郭霖推荐的和风天气接口 这里记录一下自己的使用过程 首先注册和风天气个人开发者,认证时间 ...
最新文章
- Fibonacii数列,兔子问题
- mssql sqlserver in 关键字在值为null的应用举例
- 【职场】程序员摆地摊都能月入过万,是真的吗?
- eclipse 启动tomcat时弹出错误 Multiple Contexts hava a path of “/xxx”
- java drawstring字体大小,JAVA中,drawstring 方法的用法,格式是什么啊
- html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?
- 客户成功已死,客户服务还活着
- 7-10 找最小的字符串 (15 分)
- 编程语言 Ruby 如何还能再活 25 年?
- Video 视频播放防作弊和禁止下载
- Spring Boot 集成 WebSocket,轻松实现信息推送!
- 抓包工具Fiddler基本使用
- LeetCode 951. Flip Equivalent Binary Trees
- cmd命令查看本机网外地址
- python手写lfw数据集转pair.txt形式
- bin、hex、elf、axf文件的区别
- 每天一个linux命令(26):用SecureCRT来上传和下载文件(转载自竹子)
- 有位置,来,搬个小板凳,喝酒听故事!
- Nii转png,Nii转dcm,Dcm转png
- 【SSH框架/国际物流商综平台】-01-分三期(仓储管理,货运全流程管理,决策分析)- 项目背景 界面原型 用例图 企业组织结构 功能模块图 系统框架 项目表单收集