如何将预设颜色数组应用到JavaScript秒表自动计数器实现自动变色

使用预设颜色数组实现秒表自动切换显示颜色是完全合理的方案，代码量小、运行效率高，和你现有代码结构适配度很高，你已经实现的getRandomItem随机取数组项的函数可以直接复用，无需额外改造。

你不需要改动现有计时逻辑，只需要在startTimer函数中选择合适的变色触发时机，调用取色函数拿到颜色值后，将颜色设置到计时数字对应DOM元素的文字颜色样式上即可。
常见的触发时机可按需选择：

• 每10毫秒（计时器每次刷新）变色：呈现连续快速跳色效果
• 每满1秒/每满10秒变色：变色节奏更舒缓，不影响读表
• 每次点击开始按钮时变色：计时全程固定一个颜色，下次启动再换色

为了避免随机取色时连续抽到同一个颜色、视觉上无变化，可以加一个简单的去重判断，保证相邻两次颜色不同。

1. 先在全局变量区域新增一个变量，记录上一次使用的颜色，用于去重：

let lastColor = "";

2. 将变色逻辑插入到你选择的触发位置即可，下面以每满1秒切换一次颜色为例，把逻辑放在秒数进位的判断分支中：

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

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

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

    // 秒数进位时触发变色
    let currentColor;
    // 循环取色直到和上一次颜色不一致
    do {
      currentColor = getRandomItem(colors);
    } while (currentColor === lastColor);
    lastColor = currentColor;
    // 给分、秒、毫秒三个显示块统一设置文字颜色
    roundMinutes.css("color", currentColor);
    roundSeconds.css("color", currentColor);
    roundTens.css("color", currentColor);
  }

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

  if (seconds > 59) {
    minutes++;
    roundMinutes.text("0" + minutes);
    seconds = 0;
    roundSeconds.text("0" + seconds);
  }
}

3. （可选）如果需要重置秒表时同步把颜色恢复为默认值，在重置按钮的点击事件中补充样式重置代码：

buttonReset.onclick = function () {
  clearInterval(Interval);
  minutes = "00";
  tens = "00";
  seconds = "00";
  roundTens.text(tens);
  roundSeconds.text(seconds);
  roundMinutes.text(minutes);
  // 重置为默认黑色，可自行修改默认色值
  const defaultColor = "#000000";
  roundMinutes.css("color", defaultColor);
  roundSeconds.css("color", defaultColor);
  roundTens.css("color", defaultColor);
  lastColor = "";
};

如果你不需要随机变色，想要按照颜色数组的顺序循环切换颜色，只需要把随机取色逻辑替换为顺序索引取值即可：维护一个自增的颜色索引变量，每次触发变色时索引值+1，通过colors[索引值 % colors.length]取值，就能实现按顺序循环切换颜色的效果。

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