CountUp按钮控制计时器 - JavaScript实现

本文将介绍如何使用JavaScript实现一个简单的计时器，通过点击'CountUp'按钮开始计时，每秒递增1，直到点击'Stop'按钮停止计时。

HTML代码:

<button id="countUp">CountUp</button>
<button id="stop">Stop</button>
<div id="timer">0</div>

JavaScript代码:

let timerInterval;

document.getElementById('countUp').addEventListener('click', () => {
  timerInterval = setInterval(() => {
    let timer = document.getElementById('timer').innerText;
    timer = parseInt(timer) + 1;
    document.getElementById('timer').innerText = timer;
  }, 1000);
});

document.getElementById('stop').addEventListener('click', () => {
  clearInterval(timerInterval);
});

代码解释:

1. 使用setInterval函数设置每秒执行一次的计时器，该函数接受一个回调函数和一个时间间隔参数。
2. 在回调函数中，获取当前计时器显示的值，将其转换为数字并加1，然后更新计时器显示的值。
3. 点击'Stop'按钮时，使用clearInterval函数清除计时器。

运行结果:

点击'CountUp'按钮后，计时器开始计时，每秒递增1。点击'Stop'按钮后，计时器停止。

扩展:

• 可以根据需要修改计时器的时间间隔。
• 可以添加更多功能，例如重置计时器、显示计时时间等。