如何用JavaScript实现秒表的启停切换按钮

问题描述 #

我想要使用HTML、CSS和原生JavaScript（vanilla JavaScript）制作一个类似手机的秒表。目前我已经完成了基本功能，但不想使用分开的开始和停止按钮，请问如何制作一个可在“开始”和“停止”之间切换的按钮？

修改方案 #

1. 更新HTML代码 #

将原有的「Start」和「Stop」两个按钮合并为一个切换按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <h1>Stopwatch</h1>
    <h2>Vanilla JavaScript Stopwatch</h2>
    <p><span id="seconds">00</span>:<span id="tens">00</span></p>
    <button id="button-toggle">Start</button>
    <button id="button-reset">Reset</button>
  </div>
</body>
</html>

2. 修改JavaScript逻辑 #

添加状态变量跟踪秒表运行状态，点击切换按钮时根据当前状态执行启停操作，并同步更新按钮文字：

window.onload = function () {
  
  var seconds = 00; 
  var tens = 00; 
  var appendTens = document.getElementById("tens")
  var appendSeconds = document.getElementById("seconds")
  var buttonToggle = document.getElementById('button-toggle');
  var buttonReset = document.getElementById('button-reset');
  var Interval;
  // 标记秒表是否处于运行状态
  var isRunning = false;

  buttonToggle.onclick = function() {
    if (!isRunning) {
      // 当前未运行：启动定时器
      clearInterval(Interval);
      Interval = setInterval(startTimer, 10);
      // 更新状态与按钮文字
      isRunning = true;
      buttonToggle.textContent = "Stop";
    } else {
      // 当前运行中：停止定时器
      clearInterval(Interval);
      // 更新状态与按钮文字
      isRunning = false;
      buttonToggle.textContent = "Start";
    }
  }

  buttonReset.onclick = function() {
    clearInterval(Interval);
    tens = "00";
    seconds = "00";
    appendTens.innerHTML = tens;
    appendSeconds.innerHTML = seconds;
    // 重置状态与按钮文字
    isRunning = false;
    buttonToggle.textContent = "Start";
  }
  
  function startTimer () {
    tens++; 
    
    if(tens <= 9){
      appendTens.innerHTML = "0" + tens;
    }
    
    if (tens > 9){
      appendTens.innerHTML = tens;
    } 
    
    if (tens > 99) {
      seconds++;
      appendSeconds.innerHTML = seconds < 10 ? "0" + seconds : seconds;
      tens = 0;
      appendTens.innerHTML = "00";
    }
    
    if (seconds > 9){
      appendSeconds.innerHTML = seconds;
    }
  }
}

核心逻辑说明 #

• 用isRunning变量记录秒表当前状态（true为运行中，false为已停止）
• 点击切换按钮时，根据isRunning的值判断执行启动或停止操作
• 每次状态切换时同步更新按钮显示的文字
• 重置按钮不仅重置计时数值，还会恢复按钮的初始状态和文字

内容的提问来源于stack exchange，提问作者Marwat Msulimwal