想做个直接通过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
};
}
};