4
Wie kann ich diese Ampelschaltung machen wiederholen mehr als einmal, wenn die Taste
document.getElementById('AllButton').onclick = switchAll;
function illuminateRed() {
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
}
function illuminateOrange() {
clearLights();
document.getElementById('slowLight').style.backgroundColor = "orange";
}
function illuminateGreen() {
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";
}
function illuminateRedOrange() {
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
document.getElementById('slowLight').style.backgroundColor = "orange";
}
function illuminateBlack() {
clearLights();
}
function clearLights() {
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";
}
var clickTimes = 0;
var change = 1;
function switchAll() {
clickTimes++;
switch (clickTimes) {
case 1:
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
break;
case 2:
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
document.getElementById('slowLight').style.backgroundColor = "orange";
break;
case 3:
clearLights();
document.getElementById('goLight').style.backgroundColor = "green";
break;
case 4:
clearLights();
document.getElementById('slowLight').style.backgroundColor = "orange";
break;
case 5:
clearLights();
document.getElementById('stopLight').style.backgroundColor = "red";
break;
case 6:
document.getElementById('stopLight').style.backgroundColor = "black";
document.getElementById('slowLight').style.backgroundColor = "black";
document.getElementById('goLight').style.backgroundColor = "black";
break;
}
}body {
font-family: sans-serif;
}
#controlPanel {
float: left;
padding-top: 30px;
}
.button {
background-color: gray;
color: white;
border-radius: 10px;
padding: 20px;
text-align: center;
margin: 90px 40px;
cursor: pointer;
}
#traffic-light {
height: 550px;
width: 200px;
float: left;
background-color: #333;
border-radius: 40px;
margin: 30px 0;
padding: 20px;
}
.bulb {
height: 150px;
width: 150px;
background-color: #111;
border-radius: 50%;
margin: 25px auto;
transition: background 500ms;
}<div id="controlPanel">
<h1 id="AllButton" class="button">Switch</h1>
</div>
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="slowLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>Das für meine ICT Kurs ist, müssen wir ein Ampelsystem und mein Code bauen arbeitet bisher. Sobald ich jedoch den Knopf auf dem Bildschirm gedrückt habe und jeder Klick durch die möglichen Kombinationen getaktet hat, hat die Ampel ihre Sequenz beendet, sie wird sich nicht wiederholen. Ich frage mich, ob jemand mir helfen könnte, es in die Schleife zu bringen, ich würde es danken, danke, ich bin neu im Codieren, es tut mir so leid, wenn es ausgeschaltet ist.
So wissen Sie, wie Sie die Funktion aufrufen, die den Zyklus beginnt. Haben Sie daran gedacht, die Funktion am Ende der Sequenz noch einmal aufzurufen? Durch Ausführen von 'switchAll()'? – Glubus
Ich würde vorschlagen, ein Array von Farben zu verwenden und dann einfach durch diese Farben in einer Funktion mit einem 'window.setInterval()' Ansatz zu iterieren. Und, ganz ehrlich, das Löschen von JavaScript und das Verwenden von CSS-Animationen (es sei denn, JavaScript ist aus irgendeinem Grund erforderlich). –
Sie arbeiten zweimal! Rufen Sie in Ihren 'switch case' die Funktionen auf, die Sie für jeden Status definiert haben. Viel weniger Code. – C14L