通過JS制作一個簡易數碼時鍾

　　設計思路：

　　數碼時鍾即通過圖片數字來顯示當前時間，需要顯示的圖片的URL根據時間變化而變化。

　　a、獲取當前時間Date()並將當前時間信息轉換為一個6位的字符串;

　　b、根據時間字符串每個位置對應的數字來更改圖片的src的值，從而實現更換顯示圖片;

　　構建HTML基礎並添加樣式。

<div id="div1">
    <img src='./數字時鍾（1）_files/0.jpg'>
    <img src='./數字時鍾（1）_files/0.jpg'>
    :
    <img src='./數字時鍾（1）_files/0.jpg'>
    <img src='./數字時鍾（1）_files/0.jpg'>
    :
   <img src='./數字時鍾（1）_files/0.jpg'>
   <img src='./數字時鍾（1）_files/0.jpg'>
</div>

　　style樣式

#div1{
    width:50%;
    margin:300px auto;
    background:black;
    }

　　獲取圖片元素以及當前時間：

    var oDiv=document.getElementById('div1');
    var aImg=oDiv.getElementsByTagName('img');
    var oDate=new Date();
    var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();

　　這里出現兩個問題

　　1、oDate.getHours()返回的都是數字，這樣編寫為數字相加，而非字符串相加。

　　2、當獲取的值為一位數時，會造成字符串的個數少於6，不滿足初始設計要求。

　　解決以上兩個問題的代碼解決方案：

　　var oDiv=document.getElementById('div1');

　　var aImg=oDiv.getElementsByTagName('img');

　　var oDate=new Date();

　　function twoDigitsStr()

　　{

　　if(n<10)

　　{return '0'+n;}

　　else

　　{return ''+n;}

　　}

　　var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

　　設置所有圖片的src值：

for(var i=0;i<aImg.length;i++)
    {
        aImg[i].src="./數字時鍾（1）_files/"+str.charAt(i)+".jpg";
    }

　　通過setInterval()來實現每隔1秒進行重新獲取當前時間以及圖片src值：

    var oDiv=document.getElementById('div1');
    var aImg=oDiv.getElementsByTagName('img');
    
    setInterval(function tick()
    {
        var oDate=new Date();
        var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./數字時鍾（1）_files/"+str.charAt(i)+".jpg";
        }
    }
    
    ,1000);

　　但是還是有一個問題，網頁在打開的初始階段，顯示時間為00：00：00，這是因為定時器有個特性，當定時器被打開后，不會立刻執行里面的函數，而是在1秒后執行。解決代碼：

var oDiv=document.getElementById('div1');
var aImg=oDiv.getElementsByTagName('img');
function tick()
{var oDate=new Date();
        var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./數字時鍾（1）_files/"+str.charAt(i)+".jpg";
        }
    }
        
    setInterval(tick,1000);
    tick();

　　問題：代碼setInterval(tick,1000);中函數tick沒有帶括號，那么JS中函數帶括號與不帶括號有什么區別？

　　完整的數碼時鍾制作JS代碼為：

    function twoDigitsStr(n)
    {
        if(n<10)
        {return '0'+n;}
        else
        {return ''+n;}
    }
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var aImg=oDiv.getElementsByTagName('img');
    function tick()
    {var oDate=new Date();
        var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./數字時鍾（1）_files/"+str.charAt(i)+".jpg";
        }
    }
        
    setInterval(tick,1000);
    tick(); 
}

　　當然，如果有好的創意圖片，可以將上述數字圖片進行替換，生成各種炫目的數碼時鍾效果。譬如：