如何使用JavaScript的setInterval为3*3区块div自动生成红色？颜色如何计数？

预期效果参考：

前置基础结构 #

HTML 结构 #

<!-- 3*3网格容器 -->
<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

CSS 样式 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}
.grid-item {
  border: 1px solid #ccc;
  transition: background 0.2s;
}
/* 红色样式类 */
.grid-item.red {
  background: red;
}

核心JS实现（基于setInterval） #

提供两种常见效果的实现，可按需选择：

效果1：单个格子轮流高亮变红（每次只有1个格子为红色） #

// 获取所有格子元素
const items = document.querySelectorAll('.grid-item')
// 初始化计数器，对应格子的索引
let count = 0

// 每隔1秒执行一次，间隔时间可自行修改
setInterval(() => {
  // 先清空所有格子的红色样式
  items.forEach(item => item.classList.remove('red'))
  // 给当前计数对应的格子加红色
  items[count].classList.add('red')
  // 计数+1，取模9实现循环
  count = (count + 1) % 9
}, 1000)

效果2：格子逐个累加变红（全部变红后重置重新开始） #

const items = document.querySelectorAll('.grid-item')
let count = 0

setInterval(() => {
  // 计数为0时清空所有红色，重新开始累加
  if (count === 0) {
    items.forEach(item => item.classList.remove('red'))
  }
  items[count].classList.add('red')
  count = (count + 1) % 9
}, 1000)

颜色计数逻辑说明 #

• 基础计数逻辑和DOM索引强绑定：9个格子的索引默认是0~8，计数器初始值设为0，直接对应第一个格子的位置
• 边界处理用取模运算：每次计数器+1后和总格子数9取余，当计数到9时9%9=0，自动回到起始位置，不需要额外写if判断重置计数
• 样式更新逻辑和计数完全同步：每次setInterval触发时，先按照需求处理历史样式（清空所有/不清空），再给当前计数对应的格子添加红色样式即可

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