JavaScriptでタイマーの信号灯のライトを変更するにはどうすればよいですか？

私は一連の信号を順番に点灯させましたが、ボタンをクリックするのではなく、2秒ごとに順番にライトを変更するWebページを開いたときにタイマーをロードします。JavaScriptでタイマーの信号灯のライトを変更するにはどうすればよいですか？

私はこれを実行しようとしましたが、動作していません。理由がわかっていて助けてくれれば、してください。ありがとう。

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

出典

2017-03-14 Orbit

あなたのコードはすでに自動的にタイマーに基づいて交通信号に影響を与えます。唯一の問題は、読み込むイメージが含まれておらず、イメージを読み込む前にインデックスを増やすことです。リストはインデックス0から始まることを忘れないでください！

の代わりに：

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

あなたが必要：

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

：

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

ここではいくつかのプレースホルダイメージを持つ完全な完全なコードは、です

私は上記のサンプルでボタンを削除しました。これは不要です。

希望すると便利です。 :)

出典

2017-03-14 20:30:29

お、申し訳ありませんが、私の画像は実際のコードに読み込まれていますが、サイトでコード内のリンクが許可されていないため、それらを削除する必要がありました。 – Orbit

i =（++ i）％3を使用した場合は条件文を削除できます。 – Pete

@Pete - これは標準のJavaScript割り当て問題ですが、モジュロを使用すると疑わしいかもしれません） –

JavaScriptでタイマーの信号灯のライトを変更するにはどうすればよいですか？

答えて

関連する問題