Question

这是一个倒数计时器，我想用一个按钮将其停止。（今天我在html和js上工作了3天，对我的错误很抱歉：D）

function countDown(a) {
  var timeleft = 60 * a;
  document.getElementById('btn0000').disabled = true;
  document.getElementById('btn1000').disabled = true;

  var downloadTimer = setInterval(function() {

    var seconds = Math.floor((timeleft) % 60);
    var minutes = Math.floor((timeleft / 60) % 60);
    document.getElementById("countdown1").innerHTML = minutes + ":" + seconds;

    timeleft -= 1;

    if (timeleft <= 0) {
      clearInterval(downloadTimer);
      document.getElementById("countdown1").innerHTML = "Finished"
      document.getElementById('btn0000').disabled = false;
      document.getElementById('btn1000').disabled = false;
    }
  }, 1000);
}

<div id="countdown1">Timer</div>
<button id="btn0000" onclick="countDown(10)">10 min</button>
<button id="btn1000" onclick="countDown(5)">5 min</button>
<button id="btnStop">Stop</button>

Answer 1

如何使用clearInterval：

var timerId;

function countDown(a) {
  var timeleft = 60 * a;
  document.getElementById('btn0000').disabled = true;
  document.getElementById('btn1000').disabled = true;

  timerId = setInterval(function() {

    var seconds = Math.floor((timeleft) % 60);
    var minutes = Math.floor((timeleft / 60) % 60);
    document.getElementById("countdown1").innerHTML = minutes + ":" + seconds;

    timeleft -= 1;

    if (timeleft <= 0) {
      clearInterval(timerId);
      document.getElementById("countdown1").innerHTML = "Finished"
      document.getElementById('btn0000').disabled = false;
      document.getElementById('btn1000').disabled = false;
    }
  }, 1000);
}

function stopTimer() {
  if (timerId) {
    clearInterval(timerId);
    document.getElementById('btn0000').disabled = false;
    document.getElementById('btn1000').disabled = false;
  }
}

<div id="countdown1">Timer</div>
<button id="btn0000" onclick="countDown(10)">10 min</button>
<button id="btn1000" onclick="countDown(5)">5 min</button>
<button id="btnStop" onclick="stopTimer()">Stop</button>

编辑：如果您想立即启动计数器，则可以将setInterval回调函数放在外面并按如下方式调用它：

var timerId;

function countDown(a) {

  function subtractSec() {
    var seconds = Math.floor((timeleft) % 60);
    var minutes = Math.floor((timeleft / 60) % 60);
    document.getElementById("countdown1").innerHTML = minutes + ":" + seconds;

    timeleft -= 1;

    if (timeleft <= 0) {
      clearInterval(timerId);
      document.getElementById("countdown1").innerHTML = "Finished"
      document.getElementById('btn0000').disabled = false;
      document.getElementById('btn1000').disabled = false;
    }
  }

  var timeleft = 60 * a;
  document.getElementById('btn0000').disabled = true;
  document.getElementById('btn1000').disabled = true;

  timerId = setInterval((() => {
    subtractSec();
    return subtractSec;
  })(), 1000);
}

function stopTimer() {
  if (timerId) {
    clearInterval(timerId);
    document.getElementById('btn0000').disabled = false;
    document.getElementById('btn1000').disabled = false;
  }
}

<div id="countdown1">Timer</div>
<button id="btn0000" onclick="countDown(10)">10 min</button>
<button id="btn1000" onclick="countDown(5)">5 min</button>
<button id="btnStop" onclick="stopTimer()">Stop</button>

如何用按钮停止功能？

1 个答案: