看最新雨量統計圖，就在自己網誌中！ (動畫版)

Tweet

change log 2007.11.10 修正一些小錯誤 2007.10.04 修正某些blog無法顯示之情形 2007.09.01 修正圖像無法顯示之錯誤 2007.08.24 將圖片改由cache讀入，大幅減少頻寬的浪費。 2007.08.23 重寫部份程式碼，並優化記憶體的使用。 2007.08.22 初始版本。

繼之前開發出最新雨量統計圖靜態版的程式碼後，海芋的朋友臥龍一直催促海芋開發會動的版本，而海芋也禁不起他的奪命連環催就開發了會動的版本。

而這個版本的運作方式，跟最新雨量統計圖靜態版一樣，都只要將程式碼，放進到您擁有的blog的widget即可，而此預設版本是以每六小時來變動，大小則是250*250。

而若您要改變時間，例如改為每三小時來變動，則您只要在紫色的地方將12改為6，以此類推，若要改為n小時，則數值必須改為n*2。而高度和寬度，仍然是將綠色值改一下即可。

說了這麼多，趕緊給大家程式碼吧，也要麻煩大家幫忙測試一下囉！
<script type="text/javascript" src="http://kaiuisme0120.googlepages.com/taiwan_rain_fall_animator.js"></script>
<a href="http://inote.tw/"><img onload='initRain(12)' src="http://bp3.blogger.com/_FK45VGwW6no/RsrmkpmdFqI/AAAAAAAADec/oKBD-l1YOy0/s400/%E6%9C%AA%E5%91%BD%E5%90%8D.GIF" style="display:none"/></a><a target="_blank" href="http://www.cwb.gov.tw/V5/observe/rainfall/rain.htm#top"><img width="250px" height="250px" name="CRainFall" /></a>
<div align="right">Power by <a target="_blank" href="http://inote.tw/2007/08/blog-post_22.html">海芋小站 </a></div>

因為這是放在海芋的GooglePages，因為有流量限制，所以可以的話，請幫忙分流喔，不然可能常常會看到叉燒包，冏！
若要更改圖片的寬度，請更改width值，若要更改圖片的長度，則請更改height值。預設為250*250。

JS檔下載網址：http://kaiuisme0120.googlepages.com/taiwan_rain_fall_animator.js

或者將以下的內容，存為JavaScript檔案，記得存成UTF-8編碼，再放到自己的網路空間。
//Author Site：http://inote.tw/
//Author：海芋
var rainarraycount = 0;
var showRainImglength;
var rains = new Array();
var RainCacheNumber = 0;
var RainCache = new Array(96);
function initRain(picNumber)
{
for(var i = 0; i<96; i ++)
{
RainCache[i]= new Image();
}
getCRainFallURL(picNumber);
}

function getCRainFallURL(picNumber)
{
var date = new Date();
var dDay;
var dHour;
var dMin;
var dMonth;
var picURL="http://www.cwb.gov.tw/V5/observe/rainfall/Data/hk";
var delayTime = 30;

//防止使用者輸入錯誤的數字值
picNumber = Math.ceil(Math.abs(picNumber));
if (picNumber > 96) picNumber = 96;
else if (picNumber <= 0) picNumber = 1;

if (RainCacheNumber > 96)
RainCacheNumber = 0;

//建構圖像陣列
for(var i=0;i<picNumber;i++)
{
date.setMinutes(date.getMinutes()- delayTime);
dMonth = date.getMonth();
dHour = date.getHours();
dMin= date.getMinutes();
dDay = date.getDate();
//修正時間
(dMin >= 30)?dMin = '3':dMin = '0';
if (dHour<10) dHour = '0' + dHour;
if (dDay<10) dDay = '0' + dDay;

if(++dMonth == 10)
{
dMonth = 'a';
}
else if(dMonth == 11)
{
dMonth = 'b';
}
else if(dMonth == 12)
{
dMonth = 'c';
}
else
{
dMonth = dMonth;
}
picURL = picURL + dMonth + dDay+ dHour+ dMin + ".jpg";
RainCache[RainCacheNumber++].src = picURL;
rains.push(picURL);
picURL="http://www.cwb.gov.tw/V5/observe/rainfall/Data/hk";
}
//秀出成果
if (picNumber == 1)
document.images.CRainFall.src=rains.pop();
else
showRainFallImg();
}

function showRainFallImg()
{
showRainImglength = rains.length-1;
rainarraycount--;
if (!(rainarraycount+1)) rainarraycount = showRainImglength;
document.images.CRainFall.src=rains[rainarraycount];
setTimeout("showRainFallImg()",1000);
}
然後，再將<script src="http://kaiuisme0120.googlepages.com/taiwan_rain_fall_animator.js"></script>，改為<script src="您的網路空間檔案路徑"></script>即可。

最後，仍然要麻煩大家測試外，也請大家轉載要著名出處喔。

相關實驗連結：

• 天氣的好助手，即時衛星雲圖 (動畫 + 可自由輸入時間版)
• 看天氣的好助手，即時雷達回波圖 (動態版)

Tweet

版權說明

本文章發佈於海芋小站，內容僅歡迎「部份」引用，引用時請註明出處及原文連結，謝謝。
若圖像無法顯示，可能因流量太大，敬請重新整理或透過留言與我回報，也歡迎「訂閱」本站文章喔，感恩!!