如何使用JS實作一個簡易數碼時鐘-js教程-PHP中文網

如何使用JS實作一個簡易數碼時鐘

不言

發布： 2018-07-11 17:29:50

原創

4374 人瀏覽過

這篇文章主要介紹了關於如何使用JS實現一個簡易數碼時鐘，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

設計想法：

　　數位時鐘即透過圖片數字來顯示目前時間，需要顯示的圖片的URL會根據時間變化而變化。

　　a、取得目前時間Date()並將目前時間資訊轉換為一個6位元的字串;

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

　　建構HTML基礎並新增樣式。

<div id="div1">
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    :
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    :
   <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
   <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
</div>

登入後複製

style樣式

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

登入後複製

　　取得圖片元素以及目前時間：

    var op=document.getElementById(&#39;p1&#39;);    
    var aImg=op.getElementsByTagName(&#39;img&#39;);    
    var oDate=new Date();    
    var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();

登入後複製

　　這裡出現兩個問題

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

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

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

　　var op=document.getElementById(&#39;p1&#39;);

　　var aImg=op.getElementsByTagName(&#39;img&#39;);

　　var oDate=new Date();

　　function twoDigitsStr()

　　{

　　if(n<10)

　　{return &#39;0&#39;+n;}

　　else　　{return &#39;&#39;+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 op=document.getElementById(&#39;p1&#39;);    var aImg=op.getElementsByTagName(&#39;img&#39;);
    
    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 op=document.getElementById(&#39;p1&#39;);
var aImg=op.getElementsByTagName(&#39;img&#39;);
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 &#39;0&#39;+n;}        else
        {return &#39;&#39;+n;}
    }
window.onload=function()
{    var op=document.getElementById(&#39;p1&#39;);   
var aImg=op.getElementsByTagName(&#39;img&#39;);    
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(); 
}

登入後複製

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