Question

我已经制作了一组按顺序点亮的红绿灯，但我想在打开网页时加载一个计时器，每隔2秒按顺序改变灯光，而不是点击按钮。

我试图这样做，但它不起作用，如果你们中的任何人知道为什么并且可以提供帮助，请这样做。感谢。

<html>

<body onload="timer()">

    <div class="container">
        <button class="btn" onclick="traffic_lights()">Change Lights</button>
        <img id="traffic-light" src="" alt="traffic lights">
    </div>

</body>

<script>

    var traffic_light_img = [];

    var i = 0;

    function traffic_lights() {
        if (i <= 3) {
            i++;
            document.getElementById("traffic-light").src = traffic_light_img[i];
        } else {
            i = 0;
            document.getElementById("traffic-light").src = traffic_light_img[i];
        }
    }

    function timer() {
        setInterval(traffic_lights, 2000);
    }

</script>

Answer 1

您的代码已经会根据计时器自动影响红绿灯。唯一的问题是您不包含任何要加载的图像，并且在加载图像之前增加索引。请记住，列表从索引0开始！

而不是：

if (i <= 3) {
  i++;
  document.getElementById("traffic-light").src = traffic_light_img[i];
}

你需要：

if (i < 3) {
  document.getElementById("traffic-light").src = traffic_light_img[i];
  i++;
}

这是完整的代码，包含一些占位符图像：

<html>

  <body onload="timer()">

    <div class="container">
      <img id="traffic-light" src="http://placehold.it/100" alt="traffic lights">
    </div>

  </body>

  <script>
    var traffic_light_img = [
      "http://placehold.it/200",
      "http://placehold.it/300",
      "http://placehold.it/100",
    ];

    var i = 0;

    function traffic_lights() {
      if (i < 3) {
        document.getElementById("traffic-light").src = traffic_light_img[i];
        i++;
      } else {
        i = 0;
        document.getElementById("traffic-light").src = traffic_light_img[i];
      }
    }

    function timer() {
      setInterval(traffic_lights, 2000);
    }

  </script>

我也删除了上面示例中的按钮，因为它不需要。

希望这有帮助！：）

如何在JavaScript中更改计时器上的交通信号灯？

1 个答案: