如何为多个HTML元素添加相同的JavaScript彩虹发光文本效果？

问题分析 #

你之前尝试的两种方法失效的原因：

• 复制代码改ID：全局变量（如rainbow、raintxt）会被后续元素覆盖，且raining函数仅针对第一个元素的字符更新颜色，导致后续元素无效果。
• 改Class用getElementsByClassName：未遍历处理所有类元素，且原代码依赖全局变量存储单元素数据，无法适配多元素场景。

修改后的完整代码 #

HTML部分

<span class="rainbow-text">Choco Chip Neocities</span>
<span class="rainbow-text">另一段彩虹文本</span>

JavaScript部分

function addLoadEvent(e) {
  var t = window.onload;
  if (typeof t != "function") window.onload = e;
  else window.onload = function() {
    if (t) t();
    e()
  }
}

function regenbogen() {
  // 获取所有需要应用效果的元素
  const rainbowElements = document.querySelectorAll('.rainbow-text');
  if (!rainbowElements.length) return;

  rainbowElements.forEach(element => {
    const text = element.textContent.trim();
    // 清空原元素内容
    element.innerHTML = '';
    // 拆分每个字符并创建独立span
    for (let i = 0; i < text.length; i++) {
      const charSpan = document.createElement('span');
      charSpan.classList.add('rain-char');
      charSpan.dataset.index = i; // 记录字符在文本中的位置
      charSpan.textContent = text.charAt(i);
      if (alink) {
        charSpan.style.cursor = 'pointer';
        charSpan.onclick = () => top.location.href = alink;
      }
      element.appendChild(charSpan);
    }
  });

  // 启动颜色更新定时器
  setInterval(raining, speed);
}

function raining() {
  const charSpans = document.querySelectorAll('.rain-char');
  charSpans.forEach(span => {
    const index = parseInt(span.dataset.index);
    const color = raincol[(index + raincnt) % raincol.length];
    span.style.color = color;
    if (glow) {
      span.style.textShadow = `${color} 0px 1px ${glow}px`;
    }
  });
  raincnt++;
}

// 配置参数
var speed = 100; // 颜色切换速度（毫秒）
var glow = 5; // 发光效果大小（像素）
var raincol = ["#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055"];
var alink = ""; // 点击跳转链接（留空则无跳转）
var raincnt = 0; // 颜色循环计数器

addLoadEvent(regenbogen);

关键改动说明 #

1. HTML结构：将id改为通用类名rainbow-text，支持多个元素复用效果。
2. 元素遍历处理：用document.querySelectorAll获取所有目标元素，逐个拆分文本字符并生成独立span标签。
3. 字符标识：给每个字符span添加data-index属性记录其在原文本中的位置，确保颜色计算准确。
4. 颜色更新逻辑：raining函数遍历所有字符span，根据全局计数器和字符索引计算颜色，实现所有元素同步的彩虹滚动效果。
5. 规范定时器调用：将字符串形式的定时器调用改为直接传入函数，避免潜在的作用域问题。

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