如何用数组实现字体颜色定时切换？解决仅显示最后一项的问题

你的问题出在定时器内部的for循环——每次定时器触发时，会在极短时间内遍历完所有颜色，最终h1的颜色会被设置为数组最后一项，所以肉眼看不到切换过程。

要实现每秒切换一种颜色，你需要维护一个当前颜色索引，每次定时器触发时切换到下一个索引对应的颜色，当索引超出数组长度时重置为0。

修改后的代码如下：

const h1 = document.getElementsByTagName("h1")[0];
const colors = ["green", "orange", "blue"];
let currentIndex = 0; // 维护当前颜色索引

const myTimeout = setInterval(function() {
  h1.style.color = colors[currentIndex];
  // 更新索引，超出数组长度时重置为0
  currentIndex = (currentIndex + 1) % colors.length;
}, 1000);

关键说明： #

• 新增currentIndex变量记录当前使用的颜色下标，初始值为0
• 每次定时器触发时，直接使用当前索引对应的颜色
• 用(currentIndex + 1) % colors.length实现索引的循环：当索引走到数组最后一项后，加1取模会回到0，实现循环切换

如果需要停止切换，可以调用clearInterval(myTimeout)。

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