網頁實時天氣外掛

阮一峰發表於2007-06-09

我寫了一個Javascript的小程式,可以在網頁上實時顯示天氣資訊。效果如下:

有興趣的朋友,可以下載原始檔。

由於我是第一次釋出自己寫的程式,寫得不好之處,還請大家多批評。

點選下載原始檔

(完)

附:reademe.txt

Yahoo天氣外掛(Yahoo Weather JS Parser)

作者:阮一峰
主頁:http://www.ruanyifeng.com/blog/
版本:v0.1
日期:2007年6月9日

一、簡述

利用Ajax技術,實時返回Yahoo! weather的天氣資訊。

二、特點

1)全球任意一個地點的天氣資訊,實時返回。每小時更新一次資料。

2)天氣資訊種類全,包括地點、經度、緯度、氣溫、氣溫、風向、風速、溼度、能見度、日出時間、日落時間、未來24小時天氣預報等內容。並且,提供大、小兩種格式的天氣示意圖。

3)採用快取設計,最大限度地減輕伺服器端壓力。

三、安裝條件

1) 伺服器端必須支援php。

2)在開啟快取選項時(預設開啟),檔案所在的目錄必須具有寫許可權。

四、安裝步驟

1)解壓檔案壓縮包,其中包含4個檔案,分別為weather.js、weather.php、demo.html和readme.txt。

2) 將weather.js和weather.php上傳至網頁所在的目錄,該目錄必須具有寫許可權。

3)訪問http://weather.yahoo.com,在地點搜尋框中,輸入所要查詢的城市的英文名字。注意,該網站只支援英文搜尋。地區碼就是該城市的天氣頁的檔名。比如,上海的天氣位於網頁http://weather.yahoo.com/forecast/CHXX0116.html,則CHXX0116就是上海的地區碼。

4)將地區碼代入下面的程式碼,然後將這些程式碼插入你所要放置天氣資訊的網頁。

<script type="text/javascript" src="weather.js"></script>
<div id="weather_info"></div>
<script type="text/javascript">
showWeatherInfo("你的地區碼");
</script>

5) 開啟瀏覽器,訪問該網頁。正常情況下,你就可以立刻看到實時返回的天氣資訊了。

五、常見問題

問:如何配置天氣資訊的顯示模板?
答:開啟weather.js檔案,找到weatherTemplate函式,該函式的註釋中有如何編輯模板的說明。

(完)

相關文章