JavaScript秒表秒数计数器十位消失问题求助

问题根源 #

1. 拼写错误：代码里把innerHTML误写成innerTextML，导致秒数小于10时补0的逻辑根本没执行，这是核心问题。
2. tens计数逻辑混乱：原代码中tens>9就显示00，且tens>60就进位，不符合10毫秒步长的计数逻辑（100次tens才等于1秒）。
3. 秒数更新时未补0：tens进位到seconds时，直接把数字赋值给DOM，没处理小于10的情况，后续补0代码又因拼写错误失效。
4. 分钟进位条件错误：seconds>60才触发进位会漏过刚好60秒的情况，应该改成seconds>=60。

修正后的代码 #

JavaScript部分

window.onload = function () {
  let seconds = 0;
  let tens = 0;
  let mins = 0;

  let appendTens = document.getElementById("tens");
  let appendSeconds = document.getElementById("seconds");
  let appendMins = document.getElementById("mins");

  let startButton = document.getElementById("start-btn");
  let stopButton = document.getElementById("stop-btn");
  let resetButton = document.getElementById("reset-btn");

  let intervals;

  startButton.onclick = function () {
    clearInterval(intervals);
    intervals = setInterval(startTimer, 10);
  };

  stopButton.onclick = function () {
    clearInterval(intervals);
  };

  resetButton.onclick = function () {
    clearInterval(intervals);
    tens = 0;
    seconds = 0;
    mins = 0;
    updateDisplay();
  };

  function startTimer() {
    tens++;

    // tens满100进位到秒（100*10ms=1s）
    if (tens >= 100) {
      seconds++;
      tens = 0;
    }

    // 秒满60进位到分钟
    if (seconds >= 60) {
      mins++;
      seconds = 0;
    }

    // 统一更新显示
    updateDisplay();
  }

  // 集中处理补0逻辑，避免重复代码
  function updateDisplay() {
    appendTens.innerHTML = tens < 10 ? "0" + tens : tens;
    appendSeconds.innerHTML = seconds < 10 ? "0" + seconds : seconds;
    appendMins.innerHTML = mins < 10 ? "0" + mins : mins;
  }
};

HTML部分（无需修改）

<div class="wrapper">
  <p><span id="mins">00</span>:<span id="seconds">00</span>:<span id="tens">00</span></p>
</div>

<div class="btn-box">
  <button id="start-btn">Start</button>
  <button id="stop-btn">Stop</button>
  <button id="reset-btn">Reset</button>
</div>

关键优化点 #

• 新增updateDisplay函数，统一处理补0逻辑，减少重复代码和出错概率。
• 修正tens的进位条件为>=100，符合10毫秒的计数逻辑。
• 修复所有拼写错误，确保补0逻辑正常执行。
• 调整分钟进位条件为>=60，逻辑更严谨。

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