JavaScript 天氣預報

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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>

有時間可以研究一下。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More