腾讯天气html,使用JS调用腾讯接口获取天气

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

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

function Weather() {};

Weather.prototype = {

getWeather: function (city, callback) {

var that = this,

cities = Weather.cityParse(),

code = cities[city] ? cities[city] : 125, // 默认使用北京城市

url = 'http://mat1.qq.com/weather/inc/minisite2_' + code + '.js'; // 腾讯天气API jsonp接口

this.createJsonp(url, function (para) {

var desc = that.weatherParse(para); // 通过jsonp获取天气相关信息

callback(desc);

});

},

// jsonp 17 createJsonp: function (url, callback) {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = url;

script.onreadystatechange = function () {

if (script.readyState === 'loaded' || script.readyState === 'complete') {

callback(__minisite2__weather__);

script.onreadystatechange = null;

script.onload = null;

}

};

script.onload = function () {

callback(__minisite2__weather__);

script.onreadystatechange = null;

script.onload = null;

};

document.body.appendChild(script);

},

weatherParse: function (para) {

try {

var params = para.split(' ');

var weather = {

city: params[0],

temperature: params[1],

range: params[2],

describe: params[3]

};

return weather;

} catch (e) {

}

}

};

// 将城市及其对应代码解析成hash形式

Weather.cityParse = function () {

var cities = {},

prop,

code,

item;

for (prop in this.city) {

item = Weather.city[prop];

for (var city in item) {

if (city !== '_') {

code = item[city];

city = city.slice(0, -1);

cities[city] = code;

}

}

}

return cities;

};

Weather.city = {

"北京市": {

"_": 125,

"北京市": 125

},

"上海市": {

"_": 252,

"上海市": 252

},

"天津市": {

"_": 127,

"天津市": 127,

"塘沽区": 132

},

"重庆市" : {

"_": 212,

"奉节区": 201,

"重庆市": 212,

"涪陵区": 213

},

"香港": {

"_": 1,

"香港": 1

},

"澳门": {

"_": 2,

"澳门": 2

},

"台湾省": {

"_": 280,

"台北市": 280

},

"云南省": {

"_": 179,

"昭通市": 173,

"丽江市": 174,

"曲靖市": 175,

"保山市": 176,

"大理州": 177,

"楚雄州": 178,

"昆明市": 179,

"瑞丽市": 180,

"玉溪市": 181,

"临沧市": 182,

"思茅市": 184,

"红河州": 185,

"文山州": 369,

"西双版纳州": 370,

"德宏州": 371,

"怒江州": 372,

"迪庆州": 373

},

"内蒙古": {

"_": 69,

"呼伦贝尔市": 4,

"兴安盟": 7,

"锡林郭勒盟": 16,

"巴彦淖尔市": 63,

"包头市": 64,

"呼和浩特市": 69,

"锡林浩特市": 99,

"通辽市": 101,

"赤峰市": 106,

"乌海市": 382,

"鄂尔多斯市": 383,

"乌兰察布市": 384

}

};

// 主要是些事件处理相关的方法包装147var Util = {148 addEvent: function (element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent('on' + type, handler);

}

},

getEvent: function (event) {

return event || window.event;

},

getTarget: function (event) {

return event.target || event.srcElement;

},

getComputedStyle: function (element) {

if (element.currentStyle) {

return element.currentStyle;

} else {

return document.defaultView.getComputedStyle(element, null);

}

},

getBoundingClientRect: function (element) {

var scrollTop = document.documentElement.scrollTop;

var scrollLeft = document.documentElement.scrollLeft;

if (element.getBoundingClientRect) {

if (typeof arguments.callee.offset != 'number') {

var temp = document.createElement('div');

temp.style.cssText = 'position: absolute; left: 0; top: 0;';

document.body.appendChild(temp);

arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;

document.body.removeChild(temp);

temp = null;

}

var rect = element.getBoundingClientRect();

var offset = arguments.callee.offset;

return {

left: rect.left + offset,

rigth: rect.right + offset,

top: rect.top + offset,

bottom: rect.bottom + offset

};

} else {

var offset = this.getElementOffset(element);

return {

left: offset.left - scrollLeft,

right: offset.left + element.offsetWidth - scrollLeft,

top: offset.top - scrollTop,

bottom: offset.top + element.offsetWidth - scrollTop

};

}

},

getElementOffset: function (element) {

var actualLeft = element.offsetLeft;

var actualTop = element.offsetTop;

var current = element.offsetParent;

while (current !== null) {

actualLeft += current.offsetLeft;

actualTop += current.actualTop;

current = current.offsetParent;

}

return {

left: actualLeft,

top: actualTop

};

}

};

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值