Javaスクリプトの自動トラフィックライトシーケンス

赤い琥珀と緑の信号が3つの画像の間で変更され、ボタンをクリックするたびにライト間で変更される以下のコードを記述しました。私が知りたいのは、ボタンを一度クリックすることができ、シーケンスが自己によって実行される方法がある場合です。赤色から黄色へ緑色で一時停止し、次に黄色から赤色に戻って、ボタンをクリックするたびにそれが発生します。それは可能なのですか？私はそれを試してコードすることができるように頼むことができますか？Javaスクリプトの自動トラフィックライトシーケンス

<!DOCTYPE html> 
<html> 
<Head> 
<script> 
var trafficlights=['redlight.png','yellowlight.png','greenlight.png','yellowlight.png']; 
var num=1 


function lightsequence(){ 
    document.getElementById('light').src = trafficlights[num++ % trafficlights.length]; 
} 
</script> 
</Head> 
<body> 
<img id="light" src="redlight.png"> 
<button onclick="lightsequence()">Change Lights</button> 
</body> 
</html>

出典

2016-10-11 MATTHEW PARKER

はい、[setTimeout]（https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout） –

['setInterval']（https：//developer.mozilla）を使用します。 org/ja-ja/docs/Web/API/WindowTimers/setInterval）右ですか？ – naveen

試してみてください。画像の代わりに背景色を持つdiv要素を使用して、私は以下のそれを適用

if (num % trafficlights.length != 1) 
    window.setTimeout(lightsequence, 500);

：

var num = 0; 
    var timeoutId = 0;  
    function lightsequence(){ 
     if (num >= trafficlights.length) { 
       num = 0; 
     } 

     document.getElementById('light').src = trafficlights[num]; 
     num += 1; 
    } 

    function startTL() { 
     lightsequence(); // Run once first. 
     timeoutId = setInterval(lightsequence, 1000); // Run every second 
    }

出典

2016-10-11 11:08:41

私の現在のコードと全く同じことですが、ボタンをクリックするたびにライトが変わるだけです。 –

@MATTHEWPARKER私は答えを変更しました。ボタンのonclick関数は、startTL（）関数を呼び出す必要があります。 setIntervalは、ループ内で毎秒lightsequence関数を呼び出したままにしておき、clearInterval（timeoutId）を呼び出すと停止します。 –

は機能lightsequenceにこれを追加

var red = '#cc0605'; 
 
var yellow = '#fad201'; 
 
var green = '#27e833'; 
 
var colors = [red, yellow, green, yellow]; 
 

 
var num=1; 
 
function divLight() { 
 
    return document.getElementById('light'); 
 
} 
 

 
function lightsequence(){ 
 
    divLight().style.background = colors[num++ % colors.length]; 
 
    if (num % colors.length != 1) 
 
     window.setTimeout(lightsequence, 500); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body onload="divLight().style.background = red;"> 
 
    <div id="light" style="width:20px;height:20px"></div> 
 
    <button onclick="lightsequence()">Change Lights</button> 
 
</body> 
 
</html>

出典

2016-10-11 11:30:32

Javaスクリプトの自動トラフィックライトシーケンス

答えて

関連する問題