如何更改JavaScript中定時器上交通信號燈的燈光？

我已經制作了一組按順序點亮的交通燈，但是我想在打開網頁時每載入一個定時器，以便每2秒鐘順序更換一次定時器，而不是單擊按鈕。如何更改JavaScript中定時器上交通信號燈的燈光？

我試圖做到這一點，但它不工作，如果你們任何人知道爲什麼，可以幫忙，請做。謝謝。

<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>

來源

2017-03-14 Orbit

您的代碼已經影響自動根據計時器紅綠燈。唯一的問題是，您不包含任何要加載的圖像，並且您在加載圖像之前增加索引。請記住，列表從索引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>

我也刪除了上面示例中的按鈕，因爲它不是必需的。

希望這會有所幫助！ :)

來源

2017-03-14 20:30:29

哦，對不起，我有我的實際代碼中加載的圖像，但該網站不允許在代碼中的鏈接，所以我不得不刪除它們。 – Orbit

如果您使用i =（++ i）％3，則可以刪除條件; – Pete

@Pete - 真，好抓:)雖然這是一個標準的JavaScript分配問題，並且如果他使用modulo可能會引起懷疑;） –

如何更改JavaScript中定時器上交通信號燈的燈光？

回答

相關問題