代码之家 › 专栏 › 技术社区 › spin99

点击按钮时如何结束倒计时?

countdowntimer countdown button html javascript

-1

spin99 · 技术社区 · 2 年前

我正在尝试创建一个函数 结束倒计时 ,或自动将分钟和秒作为 countdown timer === 0 ; 然而,使用clearInterval(时间)似乎不起作用!有人能指出我是如何实现我的目标的吗!

请注意,我已经 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>

2 回复 | 直到 2 年前

-1

Ryan White Paperpotato 2 年前

使用 clearInterval setInterval

下面是一个使用您的代码的示例,我将“setInterval”中的值传递给一个函数“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>

-1

spin99 2 年前

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;
            })});