JavaScript 实现红绿灯效果：完整代码和示例

本指南展示了如何使用 JavaScript 代码创建模拟交通灯的红绿灯效果。包含完整的代码示例、HTML 结构和 CSS 样式，帮助你轻松实现红绿灯效果。

效果描述

绿灯从 10 秒开始倒计时，倒计时颜色为绿色，当倒计时为 0 时，绿灯熄灭，黄灯亮起。
黄灯倒计时 3 秒，倒计时颜色变黄色，当倒计时为 0 时，红灯亮起。
红灯倒计时也为 10 秒，倒计时颜色为红色，当倒计时为 0 时，绿灯亮起，如此循环往复。
红灯和绿灯亮灯时长均为 30 秒，黄灯亮灯时长为 3 秒。

代码示例

JavaScript 代码

var greenLight = document.getElementById('green-light');
var yellowLight = document.getElementById('yellow-light');
var redLight = document.getElementById('red-light');
var timer = document.getElementById('timer');

var greenTime = 10;
var yellowTime = 3;
var redTime = 10;

function greenCountdown() {
  greenLight.style.backgroundColor = 'green';
  yellowLight.style.backgroundColor = 'black';
  redLight.style.backgroundColor = 'black';
  timer.innerHTML = greenTime;
  var greenTimer = setInterval(function() {
    greenTime--;
    timer.innerHTML = greenTime;
    if (greenTime == 0) {
      clearInterval(greenTimer);
      greenLight.style.backgroundColor = 'black';
      yellowCountdown();
    }
  }, 1000);
}

function yellowCountdown() {
  greenLight.style.backgroundColor = 'black';
  yellowLight.style.backgroundColor = 'yellow';
  redLight.style.backgroundColor = 'black';
  timer.innerHTML = yellowTime;
  var yellowTimer = setInterval(function() {
    yellowTime--;
    timer.innerHTML = yellowTime;
    if (yellowTime == 0) {
      clearInterval(yellowTimer);
      redCountdown();
    }
  }, 1000);
}

function redCountdown() {
  greenLight.style.backgroundColor = 'black';
  yellowLight.style.backgroundColor = 'black';
  redLight.style.backgroundColor = 'red';
  timer.innerHTML = redTime;
  var redTimer = setInterval(function() {
    redTime--;
    timer.innerHTML = redTime;
    if (redTime == 0) {
      clearInterval(redTimer);
      greenCountdown();
    }
  }, 1000);
}

greenCountdown();

CSS 代码

#traffic-light {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

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

#green-light {
  background-color: black;
}

#yellow-light {
  background-color: black;
}

#red-light {
  background-color: black;
}

#timer {
  font-size: 50px;
  margin-top: 50px;
}

HTML 代码

<div id='traffic-light'>
  <div id='green-light' class='light'></div>
  <div id='yellow-light' class='light'></div>
  <div id='red-light' class='light'></div>
</div>
<div id='timer'></div>

代码解析

HTML 结构
- 创建三个 div 元素分别代表红绿黄三色灯，并添加相应的类名和 ID。
- 创建一个 div 元素用于显示倒计时时间。
CSS 样式
- 使用 flexbox 布局，将红绿黄三色灯水平居中排列。
- 设置灯的尺寸、圆角、间距等样式。
- 默认情况下，所有灯的背景颜色设置为黑色。
JavaScript 代码
- 获取 HTML 中的灯元素和倒计时元素。
- 定义红绿黄灯的初始时间。
- 使用 setInterval 函数实现倒计时功能。
- 在每个时间段内，更新对应灯的颜色，并更新倒计时时间显示。
- 当倒计时时间为 0 时，清除当前时间间隔，并切换到下一个状态。

总结

本指南通过详细的代码示例和解释，展示了如何使用 JavaScript、HTML 和 CSS 创建模拟交通灯的红绿灯效果。你可以根据自己的需求调整代码，例如修改灯光颜色、时间设置等。