如何每5秒从颜色数组切换网页背景色？现有代码故障求助

嘿，我来帮你搞定这个背景色循环的问题！你的代码里有两个关键问题导致它只执行一次，咱们一步步修正：

问题分析 #

1. setInterval传参错误
   你写的setInterval(changeColor(), 20000)会立刻执行changeColor()，然后把它的返回值（undefined）传给setInterval，所以定时器根本不会重复触发。正确的做法是传递函数本身（不带括号）。

2. 数组被清空无法复用
   每次调用c.shift()都会把数组的第一个元素移除，第一次执行完changeColor后，数组c就空了，下次再调用时没有颜色可用，自然无法继续切换。

修正后的代码 #

这里给你一个更简洁可靠的实现，直接用索引跟踪当前颜色，逻辑更清晰：

<script type="text/javascript">
  // 保留原始颜色数组，避免被修改
  const colorList = ["blue", "black", "yellow", "red"];
  let currentColorIndex = 0;

  function changeColor() {
    // 设置当前背景色
    document.bgColor = colorList[currentColorIndex];
    // 索引递增，超出数组长度后重置为0，实现循环
    currentColorIndex = (currentColorIndex + 1) % colorList.length;
  }

  function start() {
    // 页面加载后立刻显示第一个颜色，不用等5秒
    changeColor();
    // 每5秒切换一次颜色，自动完成20秒一轮的循环
    setInterval(changeColor, 5000);
  }
</script>
<body onload="start()">
</body>

代码说明 #

• 用currentColorIndex跟踪当前显示的颜色，通过(currentColorIndex + 1) % colorList.length实现数组的循环遍历，永远不会耗尽颜色。
• 直接用setInterval每5秒触发一次切换，逻辑比嵌套setTimeout更简单，而且天然实现了无限循环（4个颜色×5秒=20秒一轮）。
• 开头先调用一次changeColor()，避免页面加载后需要等待5秒才看到第一个颜色，提升用户体验。

如果你坚持想用原来的嵌套setTimeout方式，也可以修复数组的问题（比如每次调用changeColor时复制一份原始数组），但上面的实现更高效易维护～

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