js红绿灯倒计时

实现红绿灯倒计时的关键是使用定时器，以下是一个简单的示例代码：

HTML部分：

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

CSS部分：

#traffic-light {
  width: 50px;
  height: 130px;
}

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

.red-light {
  background-color: red;
}

.yellow-light {
  background-color: yellow;
}

.green-light {
  background-color: green;
}

JavaScript部分：

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

function switchLight() {
  setTimeout(function() {
    // 红灯亮，其他灯灭
    redLight.style.opacity = 1;
    yellowLight.style.opacity = 0.3;
    greenLight.style.opacity = 0.3;

    setTimeout(function() {
      // 绿灯亮，其他灯灭
      redLight.style.opacity = 0.3;
      yellowLight.style.opacity = 0.3;
      greenLight.style.opacity = 1;

      setTimeout(function() {
        // 黄灯亮，其他灯灭
        redLight.style.opacity = 0.3;
        yellowLight.style.opacity = 1;
        greenLight.style.opacity = 0.3;

        setTimeout(function() {
          // 递归调用，重新开始循环
          switchLight();
        }, 2000); // 黄灯持续时间为2秒
      }, 2000); // 绿灯持续时间为2秒
    }, 2000); // 红灯持续时间为2秒
  }, 0); // 初始状态，红灯先亮，持续时间为0
}

switchLight(); // 启动红绿灯循环

这段代码中，通过使用 setTimeout 函数来实现红灯、黄灯和绿灯的循环切换。每个灯的持续时间为2秒，其中红灯亮起后立即切换到绿灯，绿灯持续2秒后切换到黄灯，黄灯持续2秒后再切换到红灯。循环调用 switchLight 函数实现不间断的红绿灯循环。