使用重置按钮重置 setInterval

Question

如您所见，我整理了一些代码，这些代码使用按钮调用 setInterval，然后使用另一个按钮调用 clearInterval。 我正在苦苦挣扎的是将“重置”按钮放在一起。

我写了一些代码，我已经删除了 'resets' 演示回到 0；但是，当重置后再次按下开始按钮时，它会在我上次停止计数器的那一点开始计数。

function myCounter() {
document.getElementById("demo").innerHTML = "0";
}

感谢任何帮助！为我的初级编码道歉 knowledge/expertise。我是一个完全的新手，所以请记住任何回复。

<p id="demo">0
 </p>
 <button onclick="myTimer = setInterval(myCounter, 1000)">
  Start counter!
 </button>
 <button onclick="clearInterval(myTimer)">
  Stop counter!
 </button>
 <script>
  var c = 0;
function myCounter() {
 document.getElementById("demo").innerHTML = ++c;
}
 </script>

Answer 1

添加 demo.innerHTML = 0; 将按您的预期运行您的代码。

let c = 0;
let myTimer;
const demo = document.getElementById("demo")

function start() {
  myTimer = setInterval(myCounter, 1000)
}

function myCounter() {
 demo.innerHTML = ++c;
}

function reset() {
  clearInterval(myTimer)
  demo.innerHTML = 0;
}

<p id="demo">
0
</p>
<button onclick="start()">
  Start counter!
</button>
<button onclick="reset()">
  Stop counter!
</button>

Answer 2

您需要执行一些操作将 var c 设置回 0（并在 HTML 中更新它）。

<p id="demo">0
</p>
<button onclick="myTimer = setInterval(myCounter, 1000)">
  Start counter!
</button>
<button onclick="clearInterval(myTimer)">
  Stop counter!
</button>
<button onclick="reset()">
  Reset counter!
</button>
<script>
  var c = 0;

  function myCounter() {
    document.getElementById("demo").innerHTML = ++c;
  }

  function reset() {
    c = 0
    document.getElementById("demo").innerHTML = 0;
  }
</script>

使用重置按钮重置 setInterval

Resetting a setInterval with a Reset button

html

setinterval

clearinterval