javascript如何实现红绿灯

红绿灯

红绿灯是用于交通信号灯系统的一种设备，用于控制交通流量，保证道路上的交通安全。在红绿灯系统中，红灯表示停车，绿灯表示行驶，黄灯表示准备停车。接下来，我将通过JavaScript来实现一个简单的红绿灯。

HTML 结构:

CSS 样式:

#traffic-light {
  width: 100px;
  height: 300px;
  border: 1px solid gray;
}

.light {
  width: 80px;
  height: 80px;
  margin: 10px auto;
  border-radius: 50%;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

JavaScript 动态控制:

// 等待 DOM 加载完成
document.addEventListener("DOMContentLoaded", function() {
  var lightIndex = 0;
  var lights = document.getElementsByClassName("light");

  setInterval(function() {
    // 移除当前亮灯样式
    lights[lightIndex].classList.remove("active");

    // 切换到下一个灯
    lightIndex = (lightIndex + 1) % lights.length;

    // 添加亮灯样式
    lights[lightIndex].classList.add("active");
  }, 2000); // 每隔 2 秒切换一次灯
});

以上的代码创建了一个简单的红绿灯效果。HTML 结构中有一个 ID 为 "traffic-light" 的容器，在该容器下有三个子元素，分别对应红灯、黄灯和绿灯，通过 CSS 设置了各自的样式。在 JavaScript 中，我们使用 setInterval 函数来循环切换亮灯的效果。当页面加载时，我们会给红灯添加 "active" 的样式类，并设置一个计时器来不断切换到下一个灯。切换灯时，我们通过移除当前亮灯的样式类，并向下一个灯添加 "active" 样式类来实现灯的切换。

总结一下，我们使用了 HTML、CSS 和 JavaScript 来实现了一个简单的红绿灯效果。通过使用一些简单的样式和 JavaScript 代码，我们可以模拟出红绿灯的闪烁效果，从而提高了交通安全。