代碼時鐘js文件,js數字時鐘代碼

本文目錄一覽：

• 1、如何使用JS實現一個簡易數碼時鐘
• 2、html時鐘代碼怎麼分解成.js文件的形式
• 3、js動態數字時鐘代碼請教

如何使用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(n10)

{return ‘0’+n;}

else

{return ”+n;}

}

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

設置所有圖片的src值：

for(var i=0;iaImg.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;iaImg.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;iaImg.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(n10)

        {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;iaImg.length;i++)

        {

            aImg[i].src=”./數字時鐘（1）_files/”+str.charAt(i)+”.jpg”;

        }

    }

    setInterval(tick,1000);

    tick(); 

}

html時鐘代碼怎麼分解成.js文件的形式

把html代碼裡邊的scriptJS內容省略/script的代碼都摘出來放進一個單獨的JS中，摘代碼的時候記得單獨的.js文件裡邊不需要再寫script/script標籤了。

還有就是 Html時鐘代碼有可能id和js是綁定的情況，so 引入js的時候可以嘗試把js放置到html網頁代碼的底部，也就是 /body之前即可。還有問題的話hi我~

js動態數字時鐘代碼請教

_time.getHours() + 100

這裡得到的數字

+ “”;

是把這個數字轉換成字符

才能執行

substr

否則會出錯