タイムコードを変更するボタンをコードに追加するにはどうすればよいですか？

-1

ボタンを押すたびに変更されるJavaScriptの作業信号がありますが、別のボタンを押すと自動的に色が自動的に変更されます。タイムコードを変更するボタンをコードに追加するにはどうすればよいですか？

私の現在のコードは次のようである：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#black { 
    background: black; 
    padding: 20px; 
    width: 150px; 
    height: 450px; 

} 
#red { 
    border-radius: 100px; 
    background: red; 
    width: 130px; 
    height: 130px; 
    position: relative; 
    top: 10px; 
    left: 10px; 

} 

#amber { 
    border-radius: 100px; 
    background: orange; 
    width: 130px; 
    height: 130px; 
    position: relative; 
    top: 20px; 
    left: 10px; 
} 

#green { 
    border-radius: 100px; 
    background: green; 
    width: 130px; 
    height: 130px; 
    position: relative; 
    top: 30px; 
    left: 10px; 
} 
    </style> 
</head> 
<body> 

<script> 
var seq = [["red","grey","grey"],["red","orange","grey"],["grey","grey","green"],["grey","orange","grey"]]; 
var y = 0; 
function lights() { 
    if (y < 4){ 
     var current = seq[y]; 
     var r = current[0]; 
     var a = current[1]; 
     var g = current[2]; 
     document.getElementById("red").style.background= r; 
     document.getElementById("amber").style.background= a; 
     document.getElementById("green").style.background = g; 
     y++ 
    } else { 
     y = 1 
     document.getElementById("red").style.background= "red"; 
     document.getElementById("green").style.background= "grey"; 
     document.getElementById("amber").style.background = "grey"; 
    } 
} 
</script> 
<div id="black"> 
<button onclick=lights()>Next cycle</button> 
<div id="red"></div> 
<div id="amber"></div> 
<div id="green"></div> 
</div> 
</body> 
</html>

出典

2016-11-30 Brogan Lawrence

スタックオーバーフローにいくつかのコード – pradeep1991singh

ようこそ提供してください！あなたは最初に[ツアー]を受け、良い質問をして[mcve]を作成することができます。そうすれば、私たちがあなたを助けやすくなります。 – Katie

いくつかの助けを得るためには、この問題に関連するHTML、CSS、JavascriptコードをGoogleに提供する必要があります。 – Lewis

あなたがsetTimeoutを使用し、一定の時間が経過した後に一度だけ実行するにはいくつかのコードをスケジュールする場合。たとえば、あなたがcolor引数を取る関数doColorChangeを持っている場合は、あなたのクリックハンドラでは、あなたが何かを言うことができる：

doColorChange('green'); // set the color now 
setTimeout(function() {doColorChange('yellow');}, 2000); 
setTimeout(function() {doColorChange('red');}, 4000);

あなたはsetTimeoutに渡す機能は、正確に量の後に実行することが保証されていないことに注意あなたが指定する時間。それらはキューに入れられ、その時間が経過すると実行可能になります。

同じコードを繰り返し実行する場合は、代わりにsetIntervalを使用できます。あなたがtoggleColor機能を持っている場合たとえば、あなたは2秒ごとに（おおよそ）、それを呼び出すために

setInterval(toggleColor, 2000);

を行うことができます。

出典

2016-11-30 15:25:09

こんにちは、次のコードを改訂してください。 jQueryだけで生のJSとHTMLは使用していません。

交通light.js

// Initialize variables at runtime 
var currentSignalState = null, 
    previousSignalState = null, 
    trafficLight, 
    signalChangeLoop; 

// Fire the constructor when DOM is available 
window.onload = function() { 
    trafficLight = document.getElementById("traffic-light"); 
    construct(); 
}; 

// Constructor function definition 
function construct(){ 

    // Assign initial values for your signal states 
    currentSignalState = "green"; 

    // Between Green and Red states is alwasy yellow so let's initialize it 
    previousSignalState = "yellow"; 

    // When DOM is ready the paragraph can be found and we can then assign the initial value of the state 
    trafficLight.innerHTML = currentSignalState; 
} 


// Manually change the traffic light's value 
function changeTrafficSignal(){ 

    // Local variable representing the next state 
    var newSignalState = ""; 

    // Between Green and Red is always Yellow 
    if(currentSignalState == "green" || currentSignalState == "red"){ 

     newSignalState = "yellow"; 

    // If state is Yellow and is coming from a Red state 
    } else if(currentSignalState == "yellow" && previousSignalState == "red"){ 

     newSignalState = "green"; 

    // Will catch state Yellow coming from Green 
    } else{ 

     newSignalState = "red"; 

    } 

    // Update our global values to be used on next iteration 
    previousSignalState = currentSignalState; 
    currentSignalState = newSignalState; 

    trafficLight.innerHTML = newSignalState; 
} 

// Initiate an interval loop to change the traffic signal state 
function startTrafficSignalAuto(){ 

    // *Suggested: alter to pass a parameter and make the interval value dynamic 
    signalChangeLoop = setInterval(changeTrafficSignal, 2000); 

} 

// Stop the interval loop 
function stopTrafficSignalAuto(){ 

    clearInterval(signalChangeLoop); 

}

index.htmlを

<!-- Loads the Javascript and fires the constructor --> 
<script src="traffic-light.js" type="text/javascript"></script> 

<!-- Paragraph where the value of the current traffic light state is displayed--> 
<p id="traffic-light"></p> 

<!-- Will change the signal state based on current and previous signal states --> 
<button onclick="changeTrafficSignal()">Manual Change</button> 

<!-- Will initiate the interval to auto change || Sugested: supply a dynamic time by passing it as a parameter --> 
<button onclick="startTrafficSignalAuto()">Automatic Start</button> 

<!-- Will stop the interval loop --> 
<button onclick="stopTrafficSignalAuto()">Automatic Stop</button>

出典

2016-11-30 15:50:05

ありがとうございました。可能であれば、私が上に掲示したコードを見て、適切に動作するようにそれに設定されたインターバル機能を実装してみてください。 –

タイムコードを変更するボタンをコードに追加するにはどうすればよいですか？

答えて

関連する問題