JavaScript秒表实现每10秒自动切换颜色功能问题排查

问题背景 #

这是一个JavaScript入门实践项目，目前秒表的启动、停止、重置、基础计时等所有基础功能均可正常运行，需要拓展颜色相关效果，实现计时器每10秒自动切换显示颜色。原有实现的颜色切换函数运行未达预期，无法定位错误，原代码如下：

window.onload = function () {
  let seconds = 00;
  let tens = 00;
  const roundTens = $("#tens");
  const roundSeconds = $("#seconds");
  const buttonStart = document.getElementById("button-start");
  const buttonStop = document.getElementById("button-stop");
  const buttonReset = document.getElementById("button-reset");
  let Interval;

  buttonStart.onclick = function () {
    clearInterval(Interval);
    Interval = setInterval(startTimer, 10);
  };

  buttonStop.onclick = function () {
    clearInterval(Interval);
  };

  buttonReset.onclick = function () {
    clearInterval(Interval);
    tens = "00";
    seconds = "00";
    roundTens.text(tens);
    roundSeconds.text(seconds);
  };

  function colorChange(color1, color2) {
    if (color1.value === "00" && color2.value === "59") {
      color1.style.color = "orange";
      color2.style.color = "red";
    } else if (color1.value === "00" && color2s.value === "00") {
      color1.style.color = "green";
      color2.style.color = "blue";
    }
  }

  function startTimer() {
    tens++;

    if (tens <= 9) {
      roundTens.text("0" + tens);
    }

    if (tens > 9) {
      roundTens.text(tens);
    }

    if (tens > 99) {
      console.log("seconds");
      seconds++;
      roundSeconds.text("0" + seconds);
      tens = 0;
      roundTens.text("0" + tens);
    }

    if (seconds > 9) {
      roundSeconds.text(seconds);
    }
  }
  colorChange();
};

错误点定位 #

• 函数调用时机错误：colorChange仅在页面加载完成时调用了1次，计时过程中从未触发，无法实时响应时间变化切换颜色
• 传参缺失：colorChange定义时要求传入2个DOM元素参数，但实际调用时未传任何参数，函数内部无法获取要修改样式的元素
• 拼写错误：第二个判断分支中误写为color2s.value，变量名多了多余的s，会直接触发JS引用错误
• 取值逻辑错误：roundTens、roundSeconds是jQuery封装对象，不能直接通过原生DOM的.value属性读取内容，且项目本身已经用tens、seconds变量存储实时时间，无需从DOM反向取值
• 业务逻辑不匹配：原有判断条件仅在0秒、59秒节点触发颜色修改，完全不符合「每10秒切换一次颜色」的需求

修复方案 #

1. 把颜色切换逻辑整合到计时函数startTimer中，每次时间更新时同步判断是否需要切换颜色，无需单独传参
2. 直接使用已有的seconds变量判断时间节点，每10秒切换一次预设颜色
3. 重置秒表时同步把文字颜色恢复为初始值
4. 修正所有拼写、API调用错误，jQuery对象修改样式使用.css()方法

修复后可运行代码 #

window.onload = function () {
  let seconds = 0;
  let tens = 0;
  const roundTens = $("#tens");
  const roundSeconds = $("#seconds");
  const buttonStart = document.getElementById("button-start");
  const buttonStop = document.getElementById("button-stop");
  const buttonReset = document.getElementById("button-reset");
  let Interval;
  // 预设循环切换的颜色组，可自行增删修改
  const colorList = ["#333", "red", "orange", "yellow", "green", "blue", "purple"];

  buttonStart.onclick = function () {
    clearInterval(Interval);
    Interval = setInterval(startTimer, 10);
  };

  buttonStop.onclick = function () {
    clearInterval(Interval);
  };

  buttonReset.onclick = function () {
    clearInterval(Interval);
    tens = 0;
    seconds = 0;
    roundTens.text("00");
    roundSeconds.text("00");
    // 重置时恢复初始颜色
    roundTens.css("color", colorList[0]);
    roundSeconds.css("color", colorList[0]);
  };

  function startTimer() {
    tens++;

    if (tens <= 9) {
      roundTens.text("0" + tens);
    }

    if (tens > 9) {
      roundTens.text(tens);
    }

    if (tens > 99) {
      seconds++;
      roundSeconds.text(seconds <= 9 ? "0" + seconds : seconds);
      tens = 0;
      roundTens.text("0" + tens);
      // 每累计满10秒切换一次颜色
      if (seconds % 10 === 0) {
        const currentColor = colorList[(seconds / 10) % colorList.length];
        roundTens.css("color", currentColor);
        roundSeconds.css("color", currentColor);
      }
    }

    if (seconds > 9) {
      roundSeconds.text(seconds);
    }
  }
  // 初始化默认文字颜色
  roundTens.css("color", colorList[0]);
  roundSeconds.css("color", colorList[0]);
};

修复后效果：秒表从0开始运行，每累计10秒自动切换一次文字颜色，颜色循环使用预设列表中的值，点击重置后颜色回到初始状态。

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