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

Tweet

release notes 2007.08.24 初使版本 2007.10.03 修正在某些blog無法顯示之情形 2007.10.04 修正圖片大小永遠固定為300*300的bug。 2009.11.21 因應中央氣象局雷達改版，修正程式碼內容以顯示

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

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

說了這麼多，快給大家程式碼吧！

<script type="text/javascript">
//Author Site：http://inote.tw/
//Author：海芋
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/V6/observe/radar/Data/MOS_1024/";
    var PostfixURL=".MOS0.jpg";
    var delayTime = 20;

    //防止使用者輸入錯誤的數字值
    picNumber = Math.ceil(Math.abs(picNumber));
    if (picNumber > 288) picNumber = 288;
    else if(picNumber <=0) picNumber = 36;
    
    //建構圖像陣列
    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 = Math.floor(dMin/10)*10;
        if (dMin < 10) dMin = '0' + dMin;
        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>
<a href="http://inote.tw/"><img style="display:none" src="http://bp3.blogger.com/_FK45VGwW6no/RsrmkpmdFqI/AAAAAAAADec/oKBD-l1YOy0/s400/%E6%9C%AA%E5%91%BD%E5%90%8D.GIF" onload="getCRaderURL(36)"/></a><a target="_blank" href="http://www.cwb.gov.tw/V6/observe/radar/radar2.htm?"><img width="300px" name="CRader" height="300px"/></a>
<div align="right">Power by <a target="_blank" href="http://inote.tw/2007/08/blog-post_8322.html">海芋小站</a></div>

至於此程式的圖像大小如果要調整的話，則是將「<img width="300px" name="CRader" height="300px"/></a>」做一個調整，舉例來說，如果你要調整為250px*250px，則要將width和height的值各調為250。

因為中央氣象局每十分鐘提供一張雷達圖，所以如果要將連續顯示的時間如果要調整，比方說要調整為最近三小時的雷達圖的話，那麼只要先找到「onload="getCRaderURL(36)」，並將數字36調整為18即可。

相關實驗連結：

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

Tweet

版權說明

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