如何使用JavaScript顯示“倒退計時器”？

我的 DOM 是這樣的：

     <input type="number" id="input" value="" placeholder="Enter time in minutes">
    <button id="button">Go</button>
    <button id="reset">reset</button>

    <div class="timer">
        <div class="mint" id="mint"></div>
        <div class="sec" id="sec"></div>
    </div>

而我的 JavaScript 就像這樣：

let currentTime = 0;
let intervalClear;
let input = document.getElementById('input');
let button = document.getElementById('button')
button.addEventListener('click', ()=>{
    let value = input.value * 60000;
    function getTime(){
        currentTime  
        function backcount(currentTime){
            let output = value - currentTime
            console.log(output);
            const mint = document.getElementById('mint'),
            sec = document.getElementById('sec');

            let minute = Math.floor(output/60000)
            let second = ((output % 60000) / 1000).toFixed(0)
            mint.innerText = minute;
            sec.innerText = second;

            if(output == 0){
                clearInterval(intervalClear)
            }
        }
        backcount(currentTime);
    }
    getTime()
    intervalClear = setInterval(getTime, 1000)
})

const reset = document.getElementById('reset')
reset.addEventListener('click', ()=>{
    clearInterval(intervalClear);
    input.value = '';
})

現在我想在我的網頁中顯示值但它沒有更新。似乎它凍結了。但我的“setInterval()”運行正常。

我該如何解決這個問題？需要幫忙！

uj5u.com熱心網友回復：

你需要而不是這個代碼

let output = value - currentTime

用這個

let output = value - (currentTime * 1000)

let currentTime = 0;
let intervalClear;
let input = document.getElementById('input');
let button = document.getElementById('button')
button.addEventListener('click', ()=>{
    let value = input.value * 60000;
    function getTime(){
        currentTime  
        function backcount(currentTime){
            let output = value - (currentTime * 1000)
            console.log(output);
            const mint = document.getElementById('mint'),
            sec = document.getElementById('sec');

            let minute = Math.floor(output/60000)
            let second = ((output % 60000) / 1000).toFixed(0)
            mint.innerText = minute;
            sec.innerText = second;

            if(output == 0){
                clearInterval(intervalClear)
            }
        }
        backcount(currentTime);
    }
    getTime()
    intervalClear = setInterval(getTime, 1000)
})

const reset = document.getElementById('reset')
reset.addEventListener('click', ()=>{
    clearInterval(intervalClear);
    input.value = '';
})

<input type="number" id="input" value="" placeholder="Enter time in minutes">
<button id="button">Go</button>
<button id="reset">reset</button>

<div class="timer">
    <div class="mint" id="mint"></div>
    <div class="sec" id="sec"></div>
</div>

uj5u.com熱心網友回復：

腳本

    var intervalClear;
    var input = document.querySelector('#input');
    var mint = document.querySelector('#mint');
    var sec = document.querySelector('#sec');
    var go_button = document.querySelector('#button');
    var reset_button = document.querySelector('#reset');

    go_button?.addEventListener('click', () => {
        if (input.value != '' && input.value != 0 && parseInt(input.value) != NaN) {
            startTimer(input.value, mint, sec);
        }
    });

    reset_button?.addEventListener('click', () => {
        clearInterval(intervalClear);
        mint.textContent = '00';
        sec.textContent = '00';
    });

    function startTimer(duration, minElement, secElement) {
        clearInterval(intervalClear);
        var timer = duration * 60, minutes, seconds;
        intervalClear = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0"   minutes : minutes;
            seconds = seconds < 10 ? "0"   seconds : seconds;

            minElement.textContent = minutes;
            secElement.textContent = seconds;

            if (--timer < 0) {
                timer = duration;
            }

            if (minutes == 0 && seconds == 0) {
                clearInterval(intervalClear);
                mint.textContent = '00';
                sec.textContent = '00';
            }
        }, 1000);
    }

DOM

    <input type="number" id="input" placeholder="Enter time in minutes" >
    <button id="button">Go</button>
    <button id="reset">reset</button>

    <div class="timer">
      <div class="mint" id="mint">00</div>
      <div class="sec" id="sec">00</div>
    </div>

標籤：javascript dom 设置间隔

上一篇：使用Mocktail多次呼叫后模擬不同的答案和例外

下一篇：從Array.prototype.indexOf.call中排除某些元素