Automatic light change in HTML
Question
I have to create a HTML program that changes the colours in the traffic light automatically in order when the user has clicked a button.
I have got the traffic light layout done and the colour to change when the user clicked one of three buttons.
Can anyone help me to make them light up automatically when the button is clicked?
It should light up red (wait 2 seconds), yellow (wait 2 seconds), Green and repeat.
I tried to research how to do this but I can't seem to find any solutions. All I found was how to make 1 colour change with 1 button.
document.getElementById('stopButton').onclick = stopRed; document.getElementById('slowButton').onclick = slowYellow; document.getElementById('goButton').onclick = goGreen; document.getElementById('clearLights').onclick = clearLights; document.getElementById('autoLights').onclick = setTimeout(autoLights, 3000); function stopRed() { clearLights(); document.getElementById('stopLight').style.backgroundColor = "red"; } function slowYellow() { clearLights(); document.getElementById('slowLight').style.backgroundColor = "orange"; } function goGreen() { clearLights(); document.getElementById('goLight').style.backgroundColor = "green"; } function clearLights() { document.getElementById('stopLight').style.backgroundColor = "black"; document.getElementById('slowLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "black"; } function autoLights() { alert('Hello'); }
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; }
<html> <div id="controlPanel"> <h1 id="stopButton" class="button">Stop</h1> <h1 id="slowButton" class="button">Slow</h1> <h1 id="goButton" class="button">Go</h1> <h1 id="clearLights" class="button">Clear</h1> <h1 id="autoLights" class="button">Auto</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> </html>
2 answers
solution1
3 2017-03-07 11:51:07
I like to do it with recursive function for counting. I want to help you, well, notice functions at the bottom, this should work (I see that you changed the question well I changed that timeout for 2 seconds as you wanted, I hope I helped you, let us here know if it is good enough for your question):
document.getElementById('stopButton').onclick = stopRed; document.getElementById('slowButton').onclick = slowYellow; document.getElementById('goButton').onclick = goGreen; document.getElementById('Lights').onclick = Lights; document.getElementById('autoLights').onclick = autoLights; function stopRed() { Lights(); document.getElementById('stopLight').style.backgroundColor = "red"; } function slowYellow() { Lights(); document.getElementById('slowLight').style.backgroundColor = "orange"; } function goGreen() { Lights(); document.getElementById('goLight').style.backgroundColor = "green"; } function Lights() { document.getElementById('stopLight').style.backgroundColor = "black"; document.getElementById('slowLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "black"; } function lightOne(num){ Lights(); switch(num) { case 1: stopRed(); break; case 2: slowYellow(); break; case 3: goGreen(); break; default: alert("you made some error"); } } counter = 0; maxSec = 3; function timer() { setTimeout(function(){ counter++; lightOne(counter); if(counter == maxSec) { return; } timer(); }, 2000); } function autoLights() { counter = 1; lightOne(counter); timer(); }
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; }
<html> <div id="controlPanel"> <h1 id="stopButton" class="button">Stop</h1> <h1 id="slowButton" class="button">Slow</h1> <h1 id="goButton" class="button">Go</h1> <h1 id="Lights" class="button">Clear</h1> <h1 id="autoLights" class="button">Auto</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> </html>
solution2
1 ACCPTED 2017-03-08 07:15:46
i change your (autoLights) function
var counter = 2; var timerId = 0; document.getElementById('stopButton').onclick = stopRed; document.getElementById('slowButton').onclick = slowYellow; document.getElementById('goButton').onclick = goGreen; document.getElementById('clearLights').onclick = clearLights; document.getElementById('autoLights').onclick = autoLights; function stopRed() { document.getElementById('slowLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "black"; document.getElementById('stopLight').style.backgroundColor = "red"; } function slowYellow() { document.getElementById('stopLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "black"; document.getElementById('slowLight').style.backgroundColor = "orange"; } function goGreen() { document.getElementById('stopLight').style.backgroundColor = "black"; document.getElementById('slowLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "green"; } function clearLights() { document.getElementById('stopLight').style.backgroundColor = "black"; document.getElementById('slowLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "black"; clearInterval(timerId); } function autoLights() { stopRed(); timerId = setInterval(timer, 2000); } function timer() { if (counter == 1) stopRed(); if (counter == 2) slowYellow(); if (counter == 3) goGreen(); counter++ if (counter > 3) counter = 1; }
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="stopButton" class="button">Stop</h1> <h1 id="slowButton" class="button">Slow</h1> <h1 id="goButton" class="button">Go</h1> <h1 id="clearLights" class="button">Clear</h1> <h1 id="autoLights" class="button">Auto</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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
automatic traffic light animation
Automatic traffic light sequence Javascript
automatic traffic light sequence in java script
Manual traffic light conversion into automatic via Javascript
how to create an automatic traffic light sequence in javascript
HTML Traffic light
HTML Kickstart light box class on <a>
Traffic light colour change with no button
a light Database for html 5 storage and gdrive
Automatic scroll with HTML 5 canvas
Related Tags