js定時器與數碼時鐘案例（源碼及備註）

js定時器與數碼時鐘案例

開啓定時器

1、setInterval 間隔型

setInterval(參數一,參數二);

第一個參數是一個函數，第二個參數是時間（單位是毫秒）
意思就是每隔多長時間執行一次函數；

2、setTimeout 延時型

只執行一次

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>定時器</title>
        <script>
             let show = () =>{
                alert('a');
            }
            /* 無限執行 */
            setInterval(show,1000);//第一個參數是一個函數，第二個參數是時間，單位是毫秒
            //意思就是每隔1秒鐘執行一次show函數

            /* 只執行一次 */
            setTimeout(show,1000);

        </script>
    </head>
</html>

兩種定時器的區別

關於上述代碼，setIterval(show,1000);無限彈出‘a’,而setTimeout(show,1000);只彈一次

停止定時器

想實現的功能：點擊開始的時候彈’a’,點擊關閉的時候停止。
首先準備兩個按鈕寫上點擊事件。
關於window.onload() 方法：
它用於在網頁加載完畢後立刻執行的操作，即當 HTML 文檔加載完畢後，立刻執行某個方法。
爲什麼要加這個方法：因爲代碼是從上到下加載的，但是我們的js代碼寫在了body前面，如果不加會找不到元素（因爲那個時候body沒有加載到）。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>定時器的開啓與關閉</title>
        <script>
            window.onload = ()=>{
                let oBtn1 = document.getElementById('btn1');
                let oBtn2 = document.getElementById('btn2');
                oBtn1.onclick = ()=>{
                    setInterval(() => {
                        alert('a');
                    }, 1000);
                }
            }
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="開啓" />
        <input id="btn2" type="button" value="關閉" />
    </body>
</html>

這個時候點擊開啓已經可以實現彈’a‘啦，那麼如何實現關閉功能。

clearInterval

因爲以後我們的網頁可能會有很多定時器，爲了確保準確的關閉相應的定時器，我們需要給定時器加個名字，這裏加的名字叫timer。
因爲有些瀏覽器不支持彈窗的時候點擊按鈕，所以我們把時間間隔調長一點。

  <script>
            window.onload = ()=>{
                let oBtn1 = document.getElementById('btn1');
                let oBtn2 = document.getElementById('btn2');
                let timer
                oBtn1.onclick = ()=>{
                    timer = setInterval(() => {
                        alert('a');
                    }, 3000);
                }
                oBtn2.onclick = ()=>{
                    clearInterval(timer);
                }
            }
        </script>

clearTimeout

用於清除setTimeout

現在我們已經瞭解了定時器的功能，下面來做一個小東西

簡易數碼時鐘案例

先看最終實現效果，比較有動力：

基本佈局：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>數碼時鐘</title>
        <style>
            div{
                width: 500px;
                height: 100px;
                background-color: black;
                border-radius: 20px;
                margin:50px auto;
            }
            .img{
                display: flex;
            }
            img{
                flex: 1;
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div>
            <div class="img">              
            <img src="img/0.png" alt="">
            <img src="img/0.png" alt="">
            <img src="img/10.png" alt="">
            <img src="img/0.png" alt="">
            <img src="img/0.png" alt="">
            <img src="img/10.png" alt="">
            <img src="img/0.png" alt="">
            <img src="img/0.png" alt="">
        </div>
    </div>
    </body>
</html>

img文件夾是這樣的，名字對應數字，冒號名字是10。其中數字圖片是用美圖秀秀做的，很簡單。
現在顯示結果是這樣的，佈局完成啦

下面來說一下顯示時間的實現原理:
我們先假設一個靜態時間是07：34：21，那麼如何將時間顯示到時鐘上呢？
我們定義一個字符串str，讓它對應時間的數字順序，因爲我們的圖片和數字是一一對應的，所以用一個for循環，將圖片的路徑修改成對應的數字就可以實現。

<script>
        window.onload = () => {
            let mynum = document.getElementsByTagName('img');
            let str = '073421' //假設時間是07：34：21
            for (let i = 0; i < mynum.length; i++) {
                mynum[i].src = 'img/' + str[i] + '.png';
            };

        }
    </script>

但是現在時間是固定的，而時鐘的時間應該是實時的，我們用下面的方法來轉化實時時間

 <script>
        //補零函數
        let zero=(n)=>{
            if(n<10){
                return '0'+n;
            }
            else{
              return ''+n;  
            }
        }
        window.onload = () => {
            let mynum = document.getElementsByTagName('img');
            let oDate = new Date();//得到當前時間
            let str = zero(oDate.getHours())+zero(oDate.getMinutes())+zero(oDate.getSeconds());
            alert(str);
            for (let i = 0; i < mynum.length; i++) {
                mynum[i].src = 'img/' + str[i] + '.png';
            };

        }
    </script>

補零函數：因爲我們的時鐘，時分秒都是顯示兩位數字，但是get到的是一位數，所以需要寫一個函數，當是一位數時前面補一個零，而return’‘+n,這樣的寫法可以返回字符串型，直接get到的是數字。
現在可以實現顯示實時的時間，但是還不能動態實現，需要手動去刷新。
這個時候加入定時器就可以完美解決問題啦，運用定時器每一秒執行一次函數，就可以實現時間的動態更新。
下面是完整代碼

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>數碼時鐘</title>
    <style>
        .body {
            display: flex;
            width: 500px;
            height: 100px;
            background-color: black;
            border-radius: 20px;
            margin: 50px auto;
            justify-content: center;
            align-items: center;
        }

        .img {
            display: flex;

        }

        img {
            flex: 1;
        }

        .colon {
            background: url("img/10.png") no-repeat;
            flex: 1;
            width: 50px;

        }
    </style>
    <script>
        //補零函數
        let zero = (n) => {
            if (n < 10) {
                return '0' + n;
            } else {
                return '' + n;
            }
        }
        window.onload = () => {
            let mynum = document.getElementsByTagName('img');
            let tick = () => {
                let oDate = new Date();
                let str = zero(oDate.getHours()) + zero(oDate.getMinutes()) + zero(oDate.getSeconds());
                /* alert(str); */
                for (let i = 0; i < mynum.length; i++) {
                    mynum[i].src = 'img/' + str[i] + '.png';
                };

            }
            tick();
            setInterval(tick, 1000);

        }
    </script>
</head>

<body>
    <div class="body">
        <div class="img">
            <img src="img/0.png" alt="">
            <img src="img/0.png" alt="">
            <div class="colon"></div>
            <img src="img/0.png" alt="">
            <img src="img/0.png" alt="">
            <div class="colon"></div>
            <img src="img/0.png" alt="">
            <img src="img/0.png" alt="">
        </div>
    </div>
</body>

</html>

今天的分享就到這裏啦~(¦3[▓▓] 晚安

js定時器與數碼時鐘案例（源碼及備註）