帶定時器的JavaScript交通燈陣列

我已經創建了一個交通燈模擬（陣列），但我無法弄清楚放置計時器的位置。我知道如何添加定時器，但我不知道我的代碼在哪裏放置定時器。請幫忙。謝謝。帶定時器的JavaScript交通燈陣列

CODE：

<!DOCTYPE html> 
<html> 
<body> 

<h1>JavaScript Task 3</h1> 

<p>This is my Traffic Light script</p> 

<img id="light" src="./assets/red.jpg"> 

<button type="button" onclick="changeLights()">Change Lights</button> 

<script> 
var list = [ 
    "./assets/red.jpg", 
    "./assets/redamber.jpg", 
    "./assets/green.jpg", 
    "./assets/amber.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>

來源

2017-01-31 ben3536

這是javaScript不是Java –

如果你需要改變顏色使用像'setInterval（function（）{ changeLights（）; }，1000）;'每一秒鐘它會改變或告訴定時器的用途是什麼？ – prasanth

使用SettTimeout功能，你可以做到這一點。 SetTimout函數按提供的時間間隔延遲腳本的執行。

var list = [ 
 
    "https://upload.wikimedia.org/wikipedia/commons/b/b9/Solid_red.png", 
 
    "./assets/redamber.jpg", 
 
    "https://commons.wikimedia.org/wiki/File:Bullet-green.png", 
 
    "./assets/amber.jpg" 
 
]; 
 

 
var index = 0; 
 

 

 

 

 
function changeLights() { 
 
setTimeout(function(){ 
 
// your code here. 
 
     index = index + 1; 
 

 
    if (index == list.length) index = 0; 
 
    
 
    console.log(index); 
 

 
    var image = document.getElementById('light'); 
 
    image.innerHtml=list[index]; 
 
},1000); 
 
}

<h1>JavaScript Task 3</h1> 
 

 
<p>This is my Traffic Light script</p> 
 

 

 

 
<img id="light" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Solid_red.pn"> 
 

 
<button type="button" onclick="changeLights()">Change Lights</button>

希望這有助於。

來源

2017-01-31 09:50:07

一個解決辦法是增加一個計時器onlaod：

<body onload="trafficTimer(2000);"> 

function trafficTimer(timer) { 
    setInterval(function() { changeLights(); }, timer); 
};

這將改變光的每個2S

來源

2017-01-31 09:51:24 slou

相反的建議

setInterval(function() { changeLights(); }, 1000);

，你可以直接使用函數回調

setInterval(changeLights, 1000);

來源

2017-01-31 09:51:47

帶定時器的JavaScript交通燈陣列

回答

相關問題