Ampel Sequenz Javascript

-1

Hier ist mein Code für die Sequenzen einer Ampel. Ich frage mich, wie ich einen Timer hinzufügen könnte, um die Ampelfarbe alle 3 Sekunden zu ändern, zum Beispiel wenn die Schaltfläche geklickt wird. Vielen Dank!Ampel Sequenz Javascript

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

Quelle

2016-04-28 K. Smith

'setInterval (changeLights, 3000)' ... –

Hat Ihr Lehrer Ihnen etwas über [setTimeout] (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) oder [setInterval'] (https: //developer.mozilla .org/de-DE/docs/Web/API/WindowTimers/setInterval)? –

http://stackoverflow.com/questions/36920320/traffic-light-sequence-javascript http://stackoverflow.com/questions/34653900/what-is-wrong-with-this-traffic-light-javascript-code http : //stackoverflow.com/questions/37906626/overlooking-needed-with-html-and-javascript-traffic-light-code http://stackoverflow.com/questions/35920989/how-to-create-an-automatic- http://stackoverflow.com/questions/31747318/help-reset-settimeout-for-make-a-traffic-light-in-javascript http://stackoverflow.com/questions/ 37796563/how-to-create-button-for-traffic-light-code-in-javascript –

Verwenden Sie die setInterval-Funktion.

Der erste Parameter ist die Funktion, die Sie aufrufen möchten, und der zweite Parameter ist, wie oft er aufgerufen werden soll, in Millisekunden.

var timer = setInterval(changeLights,3000);

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]; } 
 
    var timer = setInterval(changeLights,3000);

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

Quelle

2016-04-28 16:23:39 Wowsk

Vielen Dank, sehr geschätzt! –

Wenn es Ihnen nichts ausmacht, können Sie die Antwort akzeptieren, indem Sie auf das grüne Häkchen unter dem Abstimmknopf für meine Antwort klicken. – Wowsk

Sie können eine statische Timer mit setTimeout (Funktion, Zeit) gesetzt;

In Ihrem Fall, wenn Sie alle 3 Sekunden ständig eine sich wiederholende Timer möchten, können Sie jedes Mal ausgeführt haben SetTimeout die changeLights() Funktion

w3schools article on timing

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

    timer = setTimeout("changeLights", 3000); 
}

, einmal mit dieser Änderung Siehe endet Sie starten die Lichter, die Funktion wird alle 3 Sekunden wiederholt.

Die Timer-Variable alows Sie auch den Timer zu stoppen (vielleicht mit einer anderen Taste in Ihrem Fall) mit:

clearTimeout(timer);

hoffe, das hilft

Quelle

2016-04-28 16:31:03

Danke, das hat wirklich geholfen !! –

Ampel Sequenz Javascript

Antwort

Verwandte Themen