看天氣的好助手，即時雷達回波圖 (動態版)

change log 2007.08.24 初使版本 2007.10.03 修正在某些blog無法顯示之情形 2007.10.04 修正圖片大小永遠固定為300*300的bug，請重新下載javascript檔存放，用海芋空間的則不需任何更改。

繼海芋上次寫了即時雷達回波圖靜態版，海芋一直在想要怎樣把他改成動態的，加上之前也試過把累績雨量改成動態的，於是就拿那一個程式來改了！

而您可以將此程式碼，放入您blog的widget，但前提是您的blog有支援javascript。此程式延續之前即時雷達回波圖靜態版的版本，大小仍然是250*250，而預設版本都是以每六小時來變動。

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

說了這麼多，快給大家程式碼吧！
<script type="text/javascript" src="http://kaiuisme0120.googlepages.com/taiwan_rader_animator.js"></script>
<a href="http://inote.tw/"><img onload='getCRaderURL(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/radar/radar.htm#top"><img name="CRader" width="250px" height="250px" /></a>
<div align="right">Power by <a target="_blank" href="http://inote.tw/2007/08/blog-post_8322.html">海芋小站</a></div>
因為這是放在海芋的GooglePages，因為有流量限制，所以可以的話，請幫忙分流喔，不然可能常常會看到叉燒包，冏！
若要更改圖片的寬度，請更改width值，若要更改圖片的長度，則請更改height值。預設為250*250。

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

或者將以下的內容，存為JavaScript檔案，記得存成UTF-8編碼，再放到自己的網路空間。
//Author Site：http://inote.tw/
//Author：海芋
//Original Author：好手
//Original Idea from http://soft.onlyone.idv.tw/article.asp?id=279
var raderarraycount = 0;
var showRaderImglength;
var raders = new Array();
function getCRaderURL(picNumber)
{
var date = new Date();
var dYear;
var dMonth;
var dDay;
var dHour;
var dMin;
var picURL="http://www.cwb.gov.tw/V5/observe/radar/Data/r5o/";
var PostfixURL="LmsMOS.cgm.gif";
var delayTime = 30;

//防止使用者輸入錯誤的數字值
picNumber = Math.ceil(Math.abs(picNumber));
if (picNumber > 96) picNumber = 96;
else if(picNumber <=0) picNumber = 12;
//建構圖像陣列
for(var i=0;i<picNumber;i++)
{
date.setMinutes(date.getMinutes()- delayTime);
dYear = date.getFullYear();
dMonth = date.getMonth();
dHour = date.getHours();
dMin= date.getMinutes();
dDay = date.getDate();

//修正時間
(dMin >= 30)?dMin = '30':dMin = '00';
if (++dMonth < 10) dMonth = '0' + dMonth;
if (dHour < 10) dHour = '0' + dHour;
if (dDay < 10) dDay = '0' + dDay;
raders.push(picURL + dYear+ dMonth+ dDay+ dHour+ dMin + PostfixURL);
}

//秀出成果
if (picNumber == 1)
document.images.CRader.src=raders.pop();
else
showRaderImg();
}
function showRaderImg()
{
showRaderImglength = raders.length-1;
raderarraycount--;
if (!(raderarraycount+1)) raderarraycount = showRaderImglength;
document.images.CRader.src=raders[raderarraycount];
setTimeout("showRaderImg()",1500);
}

然後，再將<script src="http://kaiuisme0120.googlepages.com/taiwan_rader_animator.js"></script>，改為<script src="您的網路空間檔案路徑"></script>即可。

當然目前海芋還有在實驗由使用者自由輸入時間，不過由於海芋仍是javascript新手，所以可能無法很快釋出囉。

相關實驗連結：

• 天氣的好助手，即時衛星雲圖 (動畫 + 可自由輸入時間版)
• 看最新雨量統計圖，就在自己網誌中！(動畫 + 可自由輸入時間版)

(非經同意請勿全文轉貼，僅歡迎「部份引用」，引用時請註明「網站名稱」及「文章網址」)
本文網址:

搜尋本站其它文章: