如何使用JS实现VIBGYOR彩虹色持续循环效果及代码问题排查

setInterval回调内的for循环会在单次定时器触发时同步执行完全部7次颜色赋值，JS执行期间浏览器会暂停UI重绘，只有等整个回调执行完成后才会渲染最终的颜色状态，因此你只能看到每次循环最后一次赋值的红色，看不到中间颜色的切换过程。

在外层维护一个独立的颜色索引计数器，每次定时器触发仅切换一个颜色，索引超出数组长度时自动重置即可实现循环切换：

const scheme = document.querySelector("div");
const rainbow = [
  "#9400D3",
  "#4B0082",
  "#0000FF",
  "#00FF00",
  "#FFFF00",
  "#FF7F00",
  "#FF0000",
];
// 记录当前展示的颜色下标
let colorIndex = 0;

setInterval(() => {
  const currentColor = rainbow[colorIndex];
  scheme.style.color = currentColor;
  scheme.style.borderColor = currentColor;
  // 下标自增，取余实现循环
  colorIndex = (colorIndex + 1) % rainbow.length;
}, 1000);

如果需要颜色切换时有平滑过渡效果，给对应元素添加CSS过渡属性即可：

div {
  /* 0.3s为过渡时长，可按需调整 */
  transition: color 0.3s ease, border-color 0.3s ease;
}

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