按下按鈕後騎自行車穿過整個陣列

總結我目前的努力，我做了一個非常基本的程序，按下按鈕後，移動到紅綠燈的下一部分（按紅色開始，按下琥珀色鍵等等），因爲交通燈的每個圖像都存儲在一個陣列中。這樣做的確如預期的那樣工作，但我現在需要更改此代碼，以便在按下按鈕時，而不是僅僅轉到數組中的下一個事物，而是循環所有這些代碼一段時間，模擬紅綠燈。我無法爲了我的生活找到從哪裏開始，並且我嘗試過的一切（setTimeout，setInterval）未按預期工作。按下按鈕後騎自行車穿過整個陣列

這裏是我的代碼（沒有任何添加/修改）：

<!DOCTYPE html> 
<html> 
<body> 

<h1 style="font-size:300%">Changing Traffic Lights</h1> 
<p> 
<button type="button" onclick="changeLights()">Change Lights</button> 
</p> 

<img id="light" src="traffic-light-red.jpg"> 

<script> 
var list = [ 
    "traffic-light-red.jpg", 
    "traffic-light-amber.jpg", 
    "traffic-light-green.jpg" 
]; 

var index = 0; 

function changeLights() { 
    index = index + 1;  
    if (index == list.length) 
    index = 0;  
    var image = document.getElementById('light');  
    image.src=list[index]; 
} 

</script> 

</body> 
</html>

來源

2016-11-15 Senyd

像這樣的事情？

// Array of light images: 
 
var list = [ 
 
    "traffic-light-red.jpg", 
 
    "traffic-light-amber.jpg", 
 
    "traffic-light-green.jpg" 
 
]; 
 

 
// Counter to keep track of which image is displayed 
 
var index = 0; 
 

 
// Get DOM references: 
 
var btnStart = document.getElementById("btnChange"); 
 
var image = document.getElementById('light'); 
 

 
// Variable to keep track of timer 
 
var timer = null; 
 

 
// Wire click events for buttons: 
 
btnStart.addEventListener("click", changeLights); 
 

 
function changeLights() { 
 
    // Only continue if we haven't cycled through all the 
 
    // items in the array yet 
 
    if(index < list.length-1){ 
 
     
 
     // Make this function call itself again in approx. 1.5 seconds 
 
     timer = setTimeout(changeLights, 1500);  
 
    } 
 
    
 
    // Change the image source and alternate text 
 
    image.src = list[index]; 
 
    image.alt = list[index]; 
 

 
    index++; // Bump up index 
 
}

<h1 style="font-size:300%">Changing Traffic Lights</h1> 
 
<p> 
 
<button type="button" id=btnChange>Change Lights</button> 
 
</p> 
 
<img id="light" src="traffic-light-red.jpg" alt="traffic-light-red.jpg">

來源

2016-11-15 17:58:16

是的，這就是我一直在尋找，但沒有任何辦法讓這個代替按鈕停止循環，它會自動後通過一個單圈停止陣列？ – Senyd

@Senyd好的，讓我調整代碼來做到這一點。 –

按下按鈕後騎自行車穿過整個陣列

回答

相關問題