如何使我的停止按钮取消我的交通灯序列？

我创建了一个显示交通信号灯的网站。当用户点击一个按钮时，灯光依次变化。只是想知道，有没有一种方法可以有一个“停止”按钮，当用户点击它时，序列停止在它当前所在的图像上？如何使我的停止按钮取消我的交通灯序列？

这里是我的代码：

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

如何使我的停止按钮取消我的交通灯序列？

回答

相关问题