js數字時鍾

在網頁中加入數字時鍾既可以增加頁面的活力，又可以方便瀏覽者。下面將通過一個具體實例介紹如何實現數字時鍾，如圖所示：

制作本實例的基本思路如下：首先需要在頁面中添加7個images，主要用於顯示兩位數的時分秒以及am（上午）和pm（下午），然后在javascript所定義的函數中利用Date對象獲得當前時

function clock()
{ 
    date=new Date();
    hour=date.getHours();
    minu=date.getMinutes();
    sec=date.getSeconds();
    if(sec<10)
        {sec="0"+sec;}
    if(minu<10) 
        {minu="0"+minu;}
    if(hour<10) 
        {hour="0"+hour;}
    time=hour+":"+minu+":"+sec;
    document.img1.src="images/Clock/c"+time.charAt(0)+".gif";
    document.img2.src="images/Clock/c"+time.charAt(1)+".gif";
    document.img3.src="images/Clock/c"+time.charAt(3)+".gif";
    document.img4.src="images/Clock/c"+time.charAt(4)+".gif";
    document.img5.src="images/Clock/c"+time.charAt(6)+".gif";
    document.img6.src="images/Clock/c"+time.charAt(7)+".gif";
    if(hour>12) 
    {document.img7.src="images/Clock/cpm.gif";}
    else 
    {document.img7.src="images/Clock/cam.gif";}
    setTimeout('clock()',1000); 
}

添加頁面設計代碼，當頁面加載時調用clock（）函數。

<img name="img1" width="16" height="21"><img name="img2" width="16" height="21"><img src="images/Clock/colon.gif" width="9" height="21"><img name="img3" width="16" height="21"><img name="img4" width="16" height="21"><img src="images/Clock/colon.gif" width="9" height="21"><img name="img5" width="16" height="21" id="img5"><img name="img6" width="16" height="21" id="img6"><img src="images/Clock/cb.gif" width="16" height="21"><img name="img7" width="16" height="21" id="img7">