如何实现字母周期性逐位变色效果？现有代码问题求解

原代码问题分析 #

1. 同步执行无延迟：嵌套循环瞬间完成所有DOM颜色设置，浏览器仅会渲染最终状态，导致看不到中间动画过程，最终所有字母显示颜色数组的最后一个颜色。
2. 逻辑不符合需求：每次循环将所有<span>设为同一个颜色，没有实现“颜色逐位传递”的效果。

修正后的代码 #

HTML（保持不变）

<div class='child'>     
    <span class="color">F</span>
    <span class="color">u</span>
    <span class="color">n</span>
    <span class="color">n</span>
    <span class="color">y</span>
    <span class="color"> </span>
    <span class="color">k</span>
    <span class="color">l</span>
    <span class="color">o</span>
    <span class="color">k</span> 
</div>

JavaScript

// 获取所有需要变色的span元素，转为数组方便操作
const colorSpans = Array.from(document.getElementsByClassName('color'));
// 定义颜色数组
const colourArray = [
  "rgb(248, 116, 138)",
  "rgb(248, 125, 145)",
  "rgb(248, 140, 160)",
  "rgb(248, 160, 180)",
  "rgb(248, 175, 195)",
  "pink",
  "rgb(248, 195, 215)",
  "rgb(248, 205, 235)",
  "rgb(248, 225, 225)",
];

// 当前使用的颜色数组索引
let colorIndex = 0;
// 动画间隔（单位：毫秒，可根据需求调整速度）
const animationInterval = 300;

// 颜色更新函数
function updateColorSequence() {
  // 从后往前更新每个span的颜色，避免覆盖未使用的前一个颜色
  for (let i = colorSpans.length - 1; i > 0; i--) {
    // 如果前一个span没有设置颜色，继承默认文本色
    colorSpans[i].style.color = colorSpans[i - 1].style.color || 'inherit';
  }
  // 第一个span设置为当前颜色数组的颜色
  colorSpans[0].style.color = colourArray[colorIndex];
  // 循环切换颜色数组索引
  colorIndex = (colorIndex + 1) % colourArray.length;
}

// 启动周期性颜色更新
setInterval(updateColorSequence, animationInterval);

代码逻辑说明 #

1. 元素获取：将getElementsByClassName返回的HTMLCollection转为数组，方便后续遍历操作。
2. 定时更新：使用setInterval周期性触发颜色更新函数，实现动画效果，animationInterval控制动画速度。
3. 颜色传递：从最后一个<span>开始，依次将每个元素的颜色设置为前一个元素的颜色，模拟颜色向后传递的跑马灯效果。
4. 循环取色：通过取余运算(colorIndex + 1) % colourArray.length，实现颜色数组的循环复用。

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