[作特效, 學JS] -- 08 倒計時

時間 2019-11-17

標籤特效倒計時欄目 JavaScript 简体版

原文原文鏈接

最終效果

須要實現的功能

點擊啓動, 開始倒計時
點擊暫停, 結束倒計時, 再次點擊啓動, 繼續倒計時
連續點擊啓動, 倒計時不受影響
倒計時, 秒針走完一分鐘, 分鐘自動減一, 秒針從 59 開始
倒計時結束, 彈框提醒
若是小於 10, 前補零

實現代碼

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>倒計時時鐘</title>
        <style> body, div { margin: 0; padding: 0; } #countdown { width: 300px; text-align: center; margin: 10px auto; padding: 20px 0; } span { color: #000; width: 80px; line-height: 2; background: #fbfbfb; border: 2px solid #b4b4b4; margin: 0 10px; padding: 0 10px; } </style>
    </head>
    <body>
        <div id="countdown">
            <span>01</span>
            分鐘
            <span>20</span>
            秒
            <input type="button" value="啓動" />
            <input type="button" value="暫停" />
        </div>
        <script src="demo.js"></script>
    </body>
</html>
複製代碼

window.onload = function(){
    // 獲取啓動按鈕
    oStart = document.querySelector('input[value="啓動"]');
    // 獲取暫停按鈕
    oPause = document.querySelector('input[value="暫停"]');
    // 剩餘時間, 參與到後面的運算
    var timeleft = 0; 
    // 定時器, 用來關掉定時任務, 另一個,判斷若是已經開啓, 點擊啓動按鈕, 就不在執行
    var timer = null; 


    // 點擊啓動, 判斷, 若是定時任務已經啓動, 就再也不執行
    oStart.onclick = function(){
        if(!timer){
            // 獲取剩餘時間
            getTimeLeft();
            // 開啓是一個定時任務, 每秒執行一次
            timer = setInterval(updateTime,100);
        }
    }

    // 點擊暫停
    oPause.onclick = function(){
        // 清除當前定時任務
        clearInterval(timer);
        // 清除原來的值, 還原計時器的初始值. 恢復默認的null
        timer = null;
    }


    // 定時任務的邏輯, 每秒, 剩餘時間減一
    function updateTime(){
        timeleft--;
        // 若是剩餘時間, 小於0, 執行暫停按鈕的邏輯, 中止定時任務
        if(timeleft<0) {
            clearInterval(timer);
            timer = null;
            alert('倒計時結束!'); // 輸出彈框
            return; // 終止函數
        }
        // 每一秒, 總的剩餘時間變化的時候, 都會執行
        showTime(); 
    }
    
    // 計算剩餘時間
    function getTimeLeft(){
        // 獲取分鐘數 "01"
        var iMin = document.querySelector('#countdown>span:nth-child(1)').innerHTML
        // 獲取秒數
        var iSec = document.querySelector('#countdown>span:nth-child(2)').innerHTML
        // 計算剩餘時間並返回
        timeleft = parseInt(iMin)*60+parseInt(iSec);
    }

    // 顯示時間, 把剩餘時間拆分紅, 分鐘數和秒數, 分別寫入到span裏面
    function showTime(){
        var iMin = parseInt(timeleft/60); // 計算分鐘數
        var iSec = parseInt(timeleft%60); // 計算秒數
        // 若是數字小於10, 前補零
        if(iMin<10){
            iMin = "0"+iMin;
        }
        if(iSec<10){
            iSec = "0"+iSec;
        }
        // 把分鐘數寫入到span標籤中
        document.querySelector('#countdown>span:nth-child(1)').innerHTML = iMin;
        // 把秒數寫入到span標籤中
        document.querySelector('#countdown>span:nth-child(2)').innerHTML = iSec;
    }
}
複製代碼