html实现交通信号灯（包含红绿灯以及读秒）功能

涛哥
Html代码

在这个html实现交通信号灯功能代码中，使用了一个 div 元素来表示交通信号灯，并使用 CSS 的类来表示三种不同颜色的灯。另外，还添加了一个 div 元素来表示读秒器，初始值为 30 秒。

下面是一个简单的 HTML 代码，可以实现交通信号灯以及读秒的功能：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>交通信号灯</title>
    <style>
      .red {
        background-color: red;
      }
      .yellow {
        background-color: yellow;
      }
      .green {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="light" class="red"></div>
    <div id="timer">30</div>
    <script>
      var light = document.getElementById("light");
      var timer = document.getElementById("timer");
      var timeLeft = 30;

      function switchLight() {
        if (light.classList.contains("red")) {
          light.classList.remove("red");
          light.classList.add("green");
          timeLeft = 15;
        } else if (light.classList.contains("green")) {
          light.classList.remove("green");
          light.classList.add("yellow");
          timeLeft = 3;
        } else if (light.classList.contains("yellow")) {
          light.classList.remove("yellow");
          light.classList.add("red");
          timeLeft = 30;
        }
      }

      setInterval(function() {
        timeLeft--;
        timer.innerHTML = timeLeft;

        if (timeLeft === 0) {
          switchLight();
        }
      }, 1000);
    </script>
  </body>
</html>

在 JavaScript 部分，定义了一个 switchLight 函数，用来切换灯的颜色和倒计时时间。同时，使用 setInterval 函数每秒钟执行一次计时器，并更新倒计时器的值。当倒计时器的值为 0 时，执行 switchLight 函数，切换灯的颜色和倒计时时间。

需要注意的是，这只是一个简单的示例代码，没有考虑到很多实际情况，例如交通信号灯的控制可能需要更复杂的逻辑。如果要实际应用，还需要根据实际需求进行修改和完善。

 
  • 倒计时
  • 交通信号灯功能
  • 红绿灯代码