javascript红路灯倒计时变色

JavaScript可以用来创建一个红绿灯倒计时和变色效果。这种交互式动画通常用于模拟交通信号灯的行为。以下是一个简单的步骤来实现这个功能：

1. **HTML结构**:
创建三个`<div>`，分别代表红灯、黄灯和绿灯，每个都有一个class对应其颜色（例如：`red`, `yellow`, `green`）。

<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>

2. **CSS样式**:
定义每个灯的颜色和显示状态（如初始为停止状态）。

.red, .yellow, .green {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

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

3. **JavaScript逻辑**:
使用`setInterval`定时切换灯的状态，可以通过改变`class`来改变颜色和透明度。这里有一个简单的计数器模式。

let lightStatus = 'red';
let countdown = 30; // 红灯时长

function changeLightColor() {
  if (lightStatus === 'red') {
    document.querySelector('.yellow').style.opacity = 1;
    document.querySelector('.green').style.opacity = 0;
    lightStatus = 'yellow';
  } else if (lightStatus === 'yellow') {
    document.querySelector('.green').style.opacity = 1;
    lightStatus = 'green';
    countdown = 30; // 黄灯结束后重置计数
  } else { // green
    document.querySelector('.yellow').style.opacity = 0;
    countdown--;
    if (countdown <= 0) {
      countdown = 30; // 绿灯结束，重置计数
      lightStatus = 'red';
    }
  }
  document.querySelector(`.${lightStatus}`).style.opacity = 1;
}

// 每秒执行一次变化
setInterval(changeLightColor, 1000);