请求修改JS代码实现Logo依次循环变色效果

要实现你需要的逐个Logo依次变色循环效果，我们可以通过跟踪当前激活的Logo索引，在每次定时器触发时单独控制对应元素的颜色，具体修改如下：

修改后的JavaScript代码 #

// 获取所有Logo元素
const iconElements = document.querySelectorAll('i');
// 当前激活的Logo索引，初始为-1表示未激活任何元素
let currentActiveIndex = -1;
// 颜色配置
const WHITE_COLOR = 'white';
const RED_COLOR = 'red';

// 设置1秒间隔的定时器
setInterval(() => {
  // 将上一个激活的Logo恢复为白色（如果存在）
  if (currentActiveIndex !== -1) {
    iconElements[currentActiveIndex].style.color = WHITE_COLOR;
  }
  
  // 更新激活索引，超过最后一个元素时自动重置为0
  currentActiveIndex = (currentActiveIndex + 1) % iconElements.length;
  
  // 将当前激活的Logo设置为红色
  iconElements[currentActiveIndex].style.color = RED_COLOR;
}, 1000);

代码逻辑说明 #

• 索引跟踪：用currentActiveIndex记录当前变红的Logo位置，初始值-1确保第一次执行时不会误修改任何元素
• 颜色切换：每次定时器触发时，先把上一个变红的Logo恢复白色，再将下一个Logo设为红色
• 循环实现：通过取余运算(currentActiveIndex + 1) % iconElements.length让索引在元素数量范围内自动循环
• 时间控制：把定时器间隔设为1000毫秒（1秒），完全匹配你要求的节奏

替换原有代码 #

请删除HTML中最后一段处理颜色的<script>标签，将上述代码替换进去，最终脚本部分如下：

<script src="js/main.js"></script>
<script>
  type(["(*≧ω≦*)", "i luv igorekowo :3", "meow ^_^"], typewriterElement,textIndex,charIndex,isDeleting, isLineVisible);
  updateTitle("kys.mom <3 ");
</script>
<script>
// 获取所有Logo元素
const iconElements = document.querySelectorAll('i');
// 当前激活的Logo索引，初始为-1表示未激活任何元素
let currentActiveIndex = -1;
// 颜色配置
const WHITE_COLOR = 'white';
const RED_COLOR = 'red';

// 设置1秒间隔的定时器
setInterval(() => {
  // 将上一个激活的Logo恢复为白色（如果存在）
  if (currentActiveIndex !== -1) {
    iconElements[currentActiveIndex].style.color = WHITE_COLOR;
  }
  
  // 更新激活索引，超过最后一个元素时自动重置为0
  currentActiveIndex = (currentActiveIndex + 1) % iconElements.length;
  
  // 将当前激活的Logo设置为红色
  iconElements[currentActiveIndex].style.color = RED_COLOR;
}, 1000);
</script>

这样就能实现：1秒后第一个Logo变红，接着第二个变红同时第一个变白，依次到第五个后，第五个变白然后第一个再次变红，循环往复的效果。

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