如何使我的停止按鈕取消我的交通燈序列？

我創建了一個顯示交通信號燈的網站。當用戶點擊一個按鈕時，燈光依次變化。只是想知道，有沒有一種方法可以有一個「停止」按鈕，當用戶點擊它時，序列停止在它當前所在的圖像上？如何使我的停止按鈕取消我的交通燈序列？

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<body> 

<h1><u> Traffic Light Sequence </u></h1> 

<p>Press the button to begin.</p> 

<img id="colour" src="F:\TrafficLightRed.jpg"> 


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

<script> 
    var timeIndex = 0; 
    var lightIndex = 0; 
    var timer; 
    var trafficLight = document.getElementById('colour'); 
    var lights = [{ 
    duration: 2, 
    image: 'F:\TrafficLightRed.jpg' 
    }, { 
    duration: 2, 
    image: 'F:\TrafficLightRedAmber.jpg' 
    }, { 
    duration: 2, 
    image: 'F:\TrafficLightGreen.jpg' 
    }, { 
    duration: 2, 
    image: 'F:\TrafficLightAmber.jpg' 
    }] 

    function resetLights() { 
    lightIndex = 0 
    } 

    function changeLights() { 
    timeIndex++; 
    if(timeIndex == lights[lightIndex].duration) { 
     timeIndex = 0; 
     trafficLight.src = lights[lightIndex].image; 
     lightIndex = lightIndex + 1; 
     if(lightIndex == 4) { 
     lightIndex = 0 
     } 
    } 
    } 
    timer = setInterval(changeLights, 1000); 
</script> 

</body> 
</html>

來源

2016-11-19 Sinclair Scott

用[clearInterval（）]（https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval） – charlietfl

clearInterval()將終止您的間隔定時器。嘗試是這樣的：

clearInterval(timer)

Explanation of clearInterval().

來源

2016-11-19 17:21:33 mangotang

正如大家都說，你可以使用clearInterval重置此。無論如何，我已經用以下的clearTimeout和setTimeout重構了你的代碼，因爲你沒有有效地處理每個燈的持續時間。

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<h1><u> Traffic Light Sequence </u></h1> 
 

 
<p>Press the button to begin.</p> 
 

 
<img id="colour" style="width: 100px; height: 100px;"> 
 

 

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

 
<script> 
 
    var lightIndex = -1; 
 
    var timer; 
 
    var trafficLight = document.getElementById('colour'); 
 
    var lights = [{ 
 
    duration: 10, // seconds 
 
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png' 
 
    }, { 
 
    duration: 3, // seconds 
 
    image: 'http://www.caloritherm.hu/assets/images/light-yellow-flash.gif' 
 
    }, { 
 
    duration: 6, // seconds 
 
    image: 'http://www.clipartkid.com/images/511/green-light-clip-art-l-clip-art-category-clipart-w3ET7s-clipart.png' 
 
    }, { 
 
    duration: 3, // seconds 
 
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Yellow_Light_Icon.svg/1024px-Yellow_Light_Icon.svg.png' 
 
    }]; 
 

 
    function resetLights() { 
 
    lightIndex = -1; 
 
    //clearInterval(timer); 
 
    if(timer) { 
 
     clearTimeout(timer); 
 
     timer = null; 
 
    } 
 
    } 
 

 
    function changeLights() { 
 
    if(++lightIndex === lights.length) { 
 
     lightIndex = 0; 
 
    } 
 
     
 
    trafficLight.src = lights[lightIndex].image; 
 
    timer = setTimeout(changeLights, lights[lightIndex].duration * 1000); 
 
    } 
 
    
 
    changeLights(); 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-11-19 23:14:42 Aruna

如何使我的停止按鈕取消我的交通燈序列？

回答

相關問題