为什么我的 JavaScript 第二个计数器不工作？

Question

我在 JavaScript 中制作了第二个计数器。但是我的代码不起作用。

我的问题：“我首先按下了开始按钮，但秒数不正常。”

这是我的代码：

var a = 0;
var Time = setInterval(Counter, 1000);
function startCounter() {
    setInterval(Counter, 1000);
}

function Counter() {
    a += 1;
    seconds.innerHTML = a;
}

function pauseCounter() {
    clearInterval(Time);
}

function resetCounter() {
    a = 0;
    seconds.innerHTML = a;
}

<button onclick="startCounter()">Start</button>
<br>
<button onclick="pauseCounter()">Pause</button>
<p>Seconds: <a id='seconds'>0</a></p>
<button onclick="resetCounter()">Reset</button>

Answer 1

您的代码中的问题在以下行：

setInterval(Counter, 1000);

在上一行中，您正在创建一个间隔，但没有将其分配给任何变量。所以它没有被取消。

在开始新的间隔之前，请确保清除上一个间隔。

每次都需要将新的setInterval分配给Time

var a = 0;
var Time;
function startCounter() {
    clearInterval(Time)
    Time = setInterval(Counter, 1000);
}

function Counter() {
    a += 1;
    seconds.innerHTML = a;
}

function pauseCounter() {
    clearInterval(Time);
}

function resetCounter() {
    a = 0;
    seconds.innerHTML = a;
}

<button onclick="startCounter()">Start</button>
<br>
<button onclick="pauseCounter()">Pause</button>
<p>Seconds: <a id='seconds'>0</a></p>
<button onclick="resetCounter()">Reset</button>

Answer 2

你必须像这样设置秒对象。

seconds = document.getElementById('seconds')

Answer 3

你在定义时间的时候，你把它设置为一个抢占式的时间间隔，也就是说它是立即开始的。在 startCounter() 中，您刚刚创建了一个无法清除的未命名间隔。

var a = 0;
var Time;
function startCounter() {
    clearInterval(Time) // prevent multiple intervals at same time
    Time = setInterval(Counter, 1000);
}

function Counter() {
    a += 1;
    seconds.innerHTML = a;
}

function pauseCounter() {
    clearInterval(Time);
}

function resetCounter() {
    a = 0;
    seconds.innerHTML = a;
}

<body>
    <script src="index.js"></script>
    <button onclick="startCounter()">Start</button>
    <br>
    <button onclick="pauseCounter()">Pause</button>
    <p>Seconds: <a id='seconds'>0</a></p>
    <button onclick="resetCounter()">Reset</button>
  </body>

Answer 4

你需要清除间隔但同时使用type=button和addEventListener

let a = 0;
let time;

let seconds;

window.addEventListener("load", function() {
  seconds = document.getElementById("seconds");
  document.getElementById("start").addEventListener("click", function() {
    clearInterval(time);
    time = setInterval(counter, 1000);
  });
  document.getElementById("pause").addEventListener("click", pauseCounter);
  document.getElementById("resetBut").addEventListener("click", resetCounter);
});

function counter() {
  a += 1;
  seconds.innerHTML = a;
}

function pauseCounter() {
  clearInterval(time);
}

function resetCounter() {
  a = 0;
  seconds.innerHTML = a;
}

<button type="button" id="start">Start</button>
<br>
<button type="button" id="pause">Pause</button>
<p>Seconds: <a id='seconds'>0</a></p>
<button type="button" id="resetBut">Reset</button>

为什么我的 JavaScript 第二个计数器不工作？

Why is my JavaScript second counter not working?

html

javascript

counter