Как заставить мою кнопку остановки отменить мою последовательность светофора?

Я создал сайт, который показывает светофор. Когда пользователь нажимает кнопку, свет меняется последовательно. Просто интересно, есть ли способ, чтобы кнопка «остановить», когда пользователь нажимает на нее, последовательность останавливается на изображении, на котором он сейчас включен?Как заставить мою кнопку остановки отменить мою последовательность светофора?

Вот мой код:

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

Как заставить мою кнопку остановки отменить мою последовательность светофора?

ответ

Смежные вопросы