如何在 Javascript 中創建一個設置的倒數計時器？

Question

我正在嘗試從設定的時間（比如 2 小時）創建一個倒數計時器。

我有一個按鈕和一個 label，我希望在按下按鈕時開始計時，在“剩余時間：”之后顯示 - 如果再次按下按鈕，計時器將重置。

這是我目前擁有的代碼：

var itemClick = document.getElementById('item1');

itemClick.addEventListener('click', function(){
    itemHandler();
})

function itemHandler(){
    var label = document.getElementById('item1-label');
    if (label.innerHTML == "") { 
        label.innerHTML = "Time Remaining:"; 
    }
}

我將如何實施呢？

Answer 1

這應該做的工作：

function itemHandler(){
    var label = document.getElementById('item1-label');
    if (label.innerHTML == "") { 
        var countdown = 10;
        label.innerHTML = `Time Remaining: ${countdown}`;
        var countdownInterval = setInterval(function() {
            if (countdown > 0) {
                label.innerHTML = `Time Remaining: ${countdown}`;
                countdown -= 1;
            }
        }, 1000); 
    } else {
        clearInterval(countdownInterval);
        label.innerHTML = '';
    }
}

Answer 2

var timer = setInterval(timerCount, 1000);
var t = 10;
function timerCount() {
                
                t--;
                if (t < 0) {
                                console.log("times up");
                                clearInterval(timer);
                } else {
                                console.log(t);
                }
                
                
}

據我所知，這是進行倒計時的最簡單方法（而且我知道的不多；-)）您似乎熟悉基本的 DOM 操作，所以我將把 rest 留給您。 請記住，要清除間隔，您必須先使用變量進行設置。