JS实现按钮控制计时开始和停止功能

让我详细讲解“JS实现按钮控制计时开始和停止功能”的完整攻略：

1. 准备工作

首先，我们需要在HTML中创建两个按钮，一个用于开始计时，一个用于停止计时。按钮的点击事件可以直接在HTML中定义或者在JavaScript中动态绑定。

<button id="start-btn">开始计时</button>
<button id="stop-btn">停止计时</button>

在JavaScript中，我们需要创建一个计时器对象来实现计时的功能。使用setInterval()方法来将计时器对象绑定到具体的函数上。

let timerId; // 计时器对象

function startTimer() {
  timerId = setInterval(() => {
    // 每次执行的代码
  }, 1000);
}

2. 开始计时

当用户点击“开始计时”按钮时，我们需要调用startTimer()方法来启动计时器对象。点击事件可以使用addEventListener()方法来动态绑定。

const startBtn = document.getElementById('start-btn');

startBtn.addEventListener('click', () => {
  startTimer();
});

3. 停止计时

当用户点击“停止计时”按钮时，我们需要停止计时器对象的执行。这可以使用clearInterval()方法来实现，并且需要注意清除计时器对象的同时将其设置为null，以便于下一次计时的启动。

const stopBtn = document.getElementById('stop-btn');

stopBtn.addEventListener('click', () => {
  clearInterval(timerId);
  timerId = null;
});

示例一

下面是一个完整的示例，可以查看CodePen。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <title>JS计时器示例</title>
</head>
<body>
  <button id="start-btn">开始计时</button>
  <button id="stop-btn">停止计时</button>
  <p id="time-display">00:00:00</p>

  <script>
    const startBtn = document.getElementById('start-btn');
    const stopBtn = document.getElementById('stop-btn');
    const timeDisplay = document.getElementById('time-display');

    let timerId; // 计时器对象
    let time = 0; // 计时时间

    function startTimer() {
      timerId = setInterval(() => {
        time++;
        timeDisplay.textContent = formatTime(time);
      }, 1000);
    }

    function stopTimer() {
      clearInterval(timerId);
      timerId = null;
      time = 0;
      timeDisplay.textContent = formatTime(time);
    }

    function formatTime(t) {
      let hour = Math.floor(t / 3600);
      let minute = Math.floor((t % 3600) / 60);
      let second = t % 60;
      return `${formatNumber(hour)}:${formatNumber(minute)}:${formatNumber(second)}`;
    }

    function formatNumber(n) {
      return n < 10 ? `0${n}` : n;
    }

    startBtn.addEventListener('click', () => {
      if (!timerId) {
        startTimer();
      }
    });

    stopBtn.addEventListener('click', () => {
      if (timerId) {
        stopTimer();
      }
    });
  </script>
</body>
</html>

这个示例中，我们创建了一个计时器对象，使用setInterval()方法将其绑定到一个计时函数上。当用户点击“开始计时”按钮时，启动计时器对象；当用户点击“停止计时”按钮时，停止计时器对象的执行，并将计时时间归零。

示例二

下面我们来看一下另外一个示例，这个示例使用了面向对象的编程方式，并且支持暂停和继续计时的功能。你可以在CodePen查看完整代码。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <title>JS计时器示例</title>
</head>
<body>
  <button id="start-btn">开始计时</button>
  <button id="pause-btn">暂停计时</button>
  <button id="resume-btn">继续计时</button>
  <button id="stop-btn">停止计时</button>
  <p id="time-display">00:00:00</p>

  <script>
    class Timer {
      constructor() {
        this.time = 0;
        this.timerId = null;
        this.running = false;
        this.paused = false;
        this.startBtn = document.getElementById('start-btn');
        this.pauseBtn = document.getElementById('pause-btn');
        this.resumeBtn = document.getElementById('resume-btn');
        this.stopBtn = document.getElementById('stop-btn');
        this.timeDisplay = document.getElementById('time-display');
        this.startBtn.addEventListener('click', () => this.start());
        this.pauseBtn.addEventListener('click', () => this.pause());
        this.resumeBtn.addEventListener('click', () => this.resume());
        this.stopBtn.addEventListener('click', () => this.stop());
        this.update();
      }

      start() {
        if (!this.running) {
          this.timerId = setInterval(() => {
            this.time++;
            this.update();
          }, 1000);
          this.running = true;
          this.paused = false;
        }
      }

      pause() {
        if (this.running && !this.paused) {
          clearInterval(this.timerId);
          this.paused = true;
        }
      }

      resume() {
        if (this.running && this.paused) {
          this.timerId = setInterval(() => {
            this.time++;
            this.update();
          }, 1000);
          this.paused = false;
        }
      }

      stop() {
        if (this.running) {
          clearInterval(this.timerId);
          this.time = 0;
          this.running = false;
          this.paused = false;
          this.update();
        }
      }

      update() {
        this.timeDisplay.textContent = this.formatTime(this.time);
        if (this.running) {
          this.startBtn.disabled = true;
          this.pauseBtn.disabled = false;
          this.resumeBtn.disabled = true;
          this.stopBtn.disabled = false;
        } else {
          this.startBtn.disabled = false;
          this.pauseBtn.disabled = true;
          this.resumeBtn.disabled = true;
          this.stopBtn.disabled = true;
        }
        if (this.paused) {
          this.startBtn.disabled = true;
          this.pauseBtn.disabled = true;
          this.resumeBtn.disabled = false;
          this.stopBtn.disabled = false;
        }
      }

      formatTime(t) {
        let hour = Math.floor(t / 3600);
        let minute = Math.floor((t % 3600) / 60);
        let second = t % 60;
        return `${this.formatNumber(hour)}:${this.formatNumber(minute)}:${this.formatNumber(second)}`;
      }

      formatNumber(n) {
        return n < 10 ? `0${n}` : n;
      }
    }

    const timer = new Timer();
  </script>
</body>
</html>

这个示例中，我们定义了Timer类来封装计时器的实现。这个类中包含了开始、暂停、继续、停止计时的方法，以及更新时间、格式化时间等辅助方法。这个类中还定义了按钮和时间显示等DOM元素的相关操作。当用户点击相应的按钮时，类中的方法会被调用，从而控制计时器的行为。值得一提的是，这个示例支持暂停和继续计时的功能，这是在第一个示例中没有涉及的。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现按钮控制计时开始和停止功能 - Python技术站