Wie ändere ich die Lichter in einer Ampel auf einen Timer in JavaScript?

Ich habe eine Reihe von Ampeln gemacht, die in der Reihe leuchten, aber ich möchte einen Timer laden, wenn die Webseite geöffnet wird, die die Lichter in der Reihenfolge alle 2 Sekunden ändert, anstatt auf einen Knopf zu klicken.Wie ändere ich die Lichter in einer Ampel auf einen Timer in JavaScript?

Ich habe versucht, dies zu tun, aber es funktioniert nicht, wenn jemand von euch weiß warum und kann helfen, bitte. Vielen Dank.

<html> 

<body onload="timer()"> 

    <div class="container"> 
     <button class="btn" onclick="traffic_lights()">Change Lights</button> 
     <img id="traffic-light" src="" alt="traffic lights"> 
    </div> 

</body> 

<script> 

    var traffic_light_img = []; 

    var i = 0; 

    function traffic_lights() { 
     if (i <= 3) { 
      i++; 
      document.getElementById("traffic-light").src = traffic_light_img[i]; 
     } else { 
      i = 0; 
      document.getElementById("traffic-light").src = traffic_light_img[i]; 
     } 
    } 

    function timer() { 
     setInterval(traffic_lights, 2000); 
    } 

</script>

Quelle

2017-03-14 Orbit

Sie Code bereits wirkt sich auf die Ampel auf einem Timer automatisch zu. Das einzige Problem besteht darin, dass Sie keine Bilder zum Laden hinzufügen und dass Sie den Index vor dem Laden der Bilder erhöhen. Denken Sie daran, Listen beginnen bei Index 0!

Statt:

if (i <= 3) { 
    i++; 
    document.getElementById("traffic-light").src = traffic_light_img[i]; 
}

Sie benötigen:

if (i < 3) { 
    document.getElementById("traffic-light").src = traffic_light_img[i]; 
    i++; 
}

Hier ist der vollständige Code, komplett mit einigen Platzhalter Bilder:

<html> 
 

 
    <body onload="timer()"> 
 

 
    <div class="container"> 
 
     <img id="traffic-light" src="http://placehold.it/100" alt="traffic lights"> 
 
    </div> 
 

 
    </body> 
 

 
    <script> 
 
    var traffic_light_img = [ 
 
     "http://placehold.it/200", 
 
     "http://placehold.it/300", 
 
     "http://placehold.it/100", 
 
    ]; 
 

 
    var i = 0; 
 

 
    function traffic_lights() { 
 
     if (i < 3) { 
 
     document.getElementById("traffic-light").src = traffic_light_img[i]; 
 
     i++; 
 
     } else { 
 
     i = 0; 
 
     document.getElementById("traffic-light").src = traffic_light_img[i]; 
 
     } 
 
    } 
 

 
    function timer() { 
 
     setInterval(traffic_lights, 2000); 
 
    } 
 

 
    </script>

Ich habe auch die Schaltfläche im obigen Beispiel entfernt, da sie nicht benötigt wird.

Hoffe, das hilft! :)

Quelle

2017-03-14 20:30:29

Oh Entschuldigung, ich habe die Bilder in meinem tatsächlichen Code geladen, aber die Seite erlaubt keine Links im Code, also musste ich sie entfernen. – Orbit

Sie könnten die Bedingungen entfernen, wenn Sie i = (++ i)% 3; – Pete

@Pete - True, und guten Fang :) Obwohl dies ein Standard-JavaScript-Zuweisungsproblem ist, und es könnte Verdacht, wenn er Modulo verwendet;) –

Wie ändere ich die Lichter in einer Ampel auf einen Timer in JavaScript?

Antwort

Verwandte Themen