使用setInterval设置三个元素实现红绿灯倒计时循环

使用`setInterval`在JavaScript中实现红绿灯倒计时循环通常会涉及HTML用于显示灯的状态、CSS样式以及JavaScript逻辑。以下是简单的步骤：

1. **HTML结构**:

<div id="trafficLight">
  <div class="light" id="red"></div>
  <div class="light" id="yellow"></div>
  <div class="light" id="green"></div>
</div>

2. **CSS样式**:

.light {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.red { background-color: red; }
.yellow { background-color: yellow; }
.green { background-color: green; }

3. **JavaScript逻辑**:

let lights = document.querySelectorAll('.light');
let intervals = [null, null, null];

function changeLight(i) {
  if (i === 0) { // 红灯
    lights[0].classList.add('on');
    lights[1].classList.remove('on');
    lights[2].classList.remove('on');
  } else if (i === 1) { // 黄灯
    lights[0].classList.remove('on');
    lights[1].classList.add('on');
    lights[2].classList.remove('on');
  } else { // 绿灯
    lights[0].classList.remove('on');
    lights[1].classList.remove('on');
    lights[2].classList.add('on');
  }
}

// 倒计时间隔 (这里假设每个阶段持续时间为3秒)
const lightDuration = 3000;

// 设置初始状态
changeLight(0);
intervals[0] = setInterval(() => {
  if (--lightDuration <= 0) {
    clearInterval(intervals[0]);
    intervals.shift(); // 移除当前结束的计时器
    changeLight((i + 1) % 3); // 循环切换
    intervals.push(setTimeout(() => {
      changeLight(0); // 开始新的红灯周期
    }, lightDuration)); // 设置下一个灯的开始时间
  }
}, lightDuration);

这个例子每3秒切换一次灯的状态，先红灯，然后黄灯，最后绿灯，然后回到第一个红灯，形成循环。