單擊按鈕時如何結束我的倒計時？

我正在嘗試創建一個函式來結束倒數計時器，或者自動使分鐘和秒成為countdown timer === 0; 但是，似乎使用 clearInterval(time) 似乎不起作用！誰能指出我如何能夠實作我想要做的事情！

請注意，我startingMinutes = 1只是為了方便而制作。

下面是倒計時功能和 HTML：

// FUNCTION - countDown function that counts down from 8 minutes

const startingMinutes = 1;
let time = startingMinutes * 60;

function updateCountDown() {

    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
        
        seconds = seconds < 1 ? '0'   seconds : seconds;
        document.getElementById("countdown").innerHTML = `${minutes}:${seconds}`;
        time--;
        time = time < 0 ? 0 : time; 
            if (minutes == 0 && seconds == 0) {
                document.getElementById('tableStyle').style.display = "block";
                document.getElementById('wordsIncluded').style.display = "block";
                document.getElementById('show_header_one').style.display = "block";
                recognition.abort(); //speech recognition stops when countdown timer ends
                isListening = false;
            }


//my attempt at clearing the countdowntimer!

        window.addEventListener('DOMContentLoaded', function() {
            document.getElementById("submit_button").addEventListener("click", function() {
                clearInterval(time);
            })});

HTML：

//where the countdown timer is displayed

<div id="circle"><p id="countdown">8:00</p></div>


//Click the below button and the countdown timer will end (minutes === 0 and seconds === 0)
<button id="submit_button" type="submit">Click to Submit</button>

    

uj5u.com熱心網友回復：

要使用clearInterval ，您需要將setInterval回傳的值傳遞給它

我在下面有一個使用您的代碼的示例，其中我將值從“setInterval”（我稱為“interval”）傳遞給函式“stop”，該函式呼叫“clearInterval”來停止計時器，并運行您正在運行的代碼。

let isListening = true;
const recognition = { abort: () => console.log('aborted') };

function updateCountDown(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  const timer = document.getElementById("countdown");
  timer.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function start(time) {
  const interval = setInterval(() => {
    if (--time) updateCountDown(time);
    else stop(interval);
  }, 1000);
  document.getElementById("submit_button")
    .addEventListener("click", () => stop(interval))
}

function stop(interval) {
  updateCountDown(0);  // This line sets time to 0
  clearInterval(interval);
  foo()
}

// I assume you want this to happen when the timer runs down or the button is clicked
function foo() {
  document.getElementById('tableStyle').style.display = "block";
  document.getElementById('wordsIncluded').style.display = "block";
  document.getElementById('show_header_one').style.display = "block";
  recognition.abort(); //speech recognition stops when countdown timer ends
  isListening = false;
}

start(8*60)

#tableStyle, #wordsIncluded, #show_header_one { display: none; }

<p id="tableStyle">Table Style</p>
<p id="wordsIncluded">Words Included</p>
<p id="show_header_one">Show Header One</p>

<div id="circle">
  <p id="countdown">8:00</p>
</div>
<button id="submit_button" type="submit">Click to Submit</button>

uj5u.com熱心網友回復：

const startingMinutes = 1;
let time = startingMinutes * 60;

var abort_count_down = true;

function updateCountDown() {

if (abort_count_down) {

    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
        
        seconds = seconds < 1 ? '0'   seconds : seconds;
        document.getElementById("countdown").innerHTML = `${minutes}:${seconds}`;
        time--;
        time = time < 0 ? 0 : time; 
            if (minutes == 0 && seconds == 0) {
                document.getElementById('tableStyle').style.display = "block";
                document.getElementById('wordsIncluded').style.display = "block";
                document.getElementById('show_header_one').style.display = "block";
                recognition.abort(); //speech recognition stops when countdown timer ends
                isListening = false;
            }

};


//my attempt at clearing the countdowntimer!

        window.addEventListener('DOMContentLoaded', function() {
            document.getElementById("submit_button").addEventListener("click", function() {
                abort_count_down = false;
            })});

標籤：javascript html 按钮 倒数 倒计时器

上一篇：反應原生：按下時更改組件道具

下一篇：避免意外重復點擊Anybtn的最佳方法是什么？