JavaScript 天气预报
var localStorage= new Object();
localStorage.cityId='';
function getWeather(){
if(!localStorage.cityId){
var cityId='';
var userLatLng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
var geocoder = new GClientGeocoder();
geocoder.getLocations(userLatLng, function(response){
if (!response || response.Status.code != 200) {
app.debug("no results from reverse geocoding!");
}
else {
var node = response.Placemark[0];
var area = node.AddressDetails.Country.AdministrativeArea;
var province = area.AdministrativeAreaName.replace('省','');
var city = area.Locality.LocalityName.replace('市','');
$.ajax({
url: 'http://service.weather.com.cn/plugin/data/city.xml',
async: false,
dataType: 'text',
success: function(text){
var arr = text.split(',');
for(var i=0;i <arr.length;i++){
var arr2 = arr[i].split('|');
var pid = 0;
if(arr2[1] == province){
pid = arr2[0];
break;
}
}
if(pid){
$.ajax({
url: 'http://service.weather.com.cn/plugin/data/city'+pid+'.xml',
async: false,
dataType: 'text',
success: function(text){
var arr = text.split(',');
for(var i=0;i <arr.length;i++){
var arr2 = arr[i].split('|');
if(arr2[1] == city){
cityId = arr2[0];
break;
}
}
}
});
}
}
});
cityId = '101'+cityId+(/^0[1-4].*$/.exec(cityId)?'00':'01');
localStorage.cityId = cityId;
_getWeather(localStorage.cityId);
}
});
}else{
_getWeather(localStorage.cityId);
}
}
function _getWeather(cityId){
$.ajax({
url: 'http://www.weather.com.cn/html/weather/'+cityId+'.shtml',
async: false,
dataType: 'html',
success: function(html){
html = html.replace(/<script(.|\s)*?\/script>/g, "");
var div = $("<div/>").append(html);
$('#weather').html($('div.weatherYubao',div).html());
div.remove();
$('#weather img').attr('src',function(i,v){return 'http://www.weather.com.cn'+v});
$('#weather h1.weatheH1 span').remove();
$('#weather td').removeAttr('style').each(function(){if($('a',this).length)$(this).html($('a',this).html())});
$('#weather table.yuBaoTable').each(function(i){$(this).addClass('day'+(i+1))});
$('#weather table.yuBaoTable tr').hover(function(){$(this).addClass('highlight')},function(){$(this).removeClass('highlight')});
}
});
}
function refresh(){
$('#weather').text('数据加载中...');
delete(localStorage.cityId);
getWeather();
}
getWeather();
weather.js代码如上。
前台调用：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<style>
body{
min-width:640px;
}
.weatheH1{
background-color: #FFFFCC;
}
.tableTop{
background-color: #FFCC99;
}
.day1{
background-color: #99CCCC;
}
.day2{
background-color: #FFCCCC;
}
.day3{
background-color: #FFFFCC;
}
.highlight {
background: #FF6;
}
</style>
</head>
<body>
<div style="text-align:right;"><a href="javascript:refresh();" title="刷新">城市不对?</a></div>
<div id="weather" style="text-align:center;">
数据加载中...
</div>
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAs5In0-0HWhAOT02sn4PouxTN_ou44HV0kOg00GnPU25UF-c_JhSJfeLjDAYNXJb7u8YdHu7w6opn0g&sensor=false" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="weather.js"></script>
</body>
</html>
有时间可以研究一下。
