用javascript实现红绿灯效果功能描述要求如下 1绿灯当倒计 时为0 时绿灯熄灭黄灯亮起黄灯倒计时3倒计时为0时红灯亮起倒计时为0时绿灯亮起如此循环往复 2红灯绿灯亮灯市长均为30秒黄灯亮灯时长为3秒 3实现效果要求有红绿黄三色灯有倒计时屏幕

显示剩余时间，倒计时数字是从30开始倒计时的，同时需要有开始和停止按钮。

HTML代码：

<div>
  <div id="traffic-light">
    <div class="red light"></div>
    <div class="yellow light"></div>
    <div class="green light"></div>
  </div>
  <div id="countdown">30</div>
  <button id="start-btn">Start</button>
  <button id="stop-btn">Stop</button>
</div>

CSS代码：

#traffic-light {
  width: 100px;
  height: 200px;
  background-color: black;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

#countdown {
  font-size: 50px;
  text-align: center;
  margin-bottom: 20px;
}

#start-btn, #stop-btn {
  font-size: 20px;
  margin-right: 10px;
}

JavaScript代码：

let countdown = 30;
let intervalId = null;

function startCountdown() {
  intervalId = setInterval(function() {
    countdown--;
    if (countdown === 27) {
      document.querySelector('.green').classList.remove('active');
      document.querySelector('.yellow').classList.add('active');
    } else if (countdown === 24) {
      document.querySelector('.yellow').classList.remove('active');
      document.querySelector('.red').classList.add('active');
    } else if (countdown === 21) {
      document.querySelector('.countdown').classList.add('warning');
    } else if (countdown === 18) {
      document.querySelector('.red').classList.remove('active');
      document.querySelector('.yellow').classList.add('active');
    } else if (countdown === 15) {
      document.querySelector('.yellow').classList.remove('active');
      document.querySelector('.green').classList.add('active');
      document.querySelector('.countdown').classList.remove('warning');
    } else if (countdown === 0) {
      countdown = 30;
    }
    document.querySelector('#countdown').textContent = countdown;
  }, 1000);
}

function stopCountdown() {
  clearInterval(intervalId);
  intervalId = null;
  countdown = 30;
  document.querySelector('#countdown').textContent = countdown;
  document.querySelector('.red').classList.add('active');
  document.querySelector('.yellow').classList.remove('active');
  document.querySelector('.green').classList.remove('active');
  document.querySelector('.countdown').classList.remove('warning');
}

document.querySelector('#start-btn').addEventListener('click', function() {
  startCountdown();
});

document.querySelector('#stop-btn').addEventListener('click', function() {
  stopCountdown();
});

解释：

1. 定义了一个倒计时变量 countdown，初始值为 30，表示红灯亮起的时间；同时定义了一个定时器 ID 变量 intervalId，初始值为 null，表示定时器尚未开始。
2. 定义了一个 startCountdown() 函数，该函数在被调用时会启动一个定时器，每隔一秒钟执行一次回调函数。
3. 在回调函数中，倒计时变量 countdown 减 1，表示时间流逝了 1 秒。
4. 根据倒计时的数值，依次判断当前应该亮起哪个灯，以及是否需要改变倒计时屏幕的样式。如果倒计时时间为 27 秒，表示绿灯亮起了 3 秒钟，此时需要将绿灯灭掉，黄灯亮起；如果倒计时时间为 24 秒，表示黄灯亮起了 3 秒钟，此时需要将黄灯灭掉，红灯亮起；如果倒计时时间为 21 秒，表示红灯亮起了 9 秒钟，此时需要将倒计时屏幕的样式改为警告状态；如果倒计时时间为 18 秒，表示红灯亮起了 12 秒钟，此时需要将红灯灭掉，黄灯亮起；如果倒计时时间为 15 秒，表示黄灯亮起了 3 秒钟，此时需要将黄灯灭掉，绿灯亮起，同时将倒计时屏幕的样式恢复为正常状态；如果倒计时时间为 0 秒，表示绿灯亮起了 15 秒钟，此时需要将倒计时变量重置为 30 秒，以便下一个周期的循环。
5. 在回调函数中，将倒计时屏幕的内容更新为当前倒计时的数值。
6. 定义了一个 stopCountdown() 函数，该函数在被调用时会停止运行中的定时器，并重置所有状态，包括倒计时变量、定时器 ID 变量、灯光状态和倒计时屏幕样式。
7. 在 HTML 中，定义了一个包含红绿黄三色灯和倒计时屏幕的容器。
8. 在 HTML 中，定义了两个按钮，分别是开始和停止按钮，用于启动和停止倒计时。
9. 在 JavaScript 中，分别为开始和停止按钮添加了点击事件的监听器，当用户点击按钮时，会分别调用对应的函数