Simon Timed Event Lights

This JavaScript program shows how create timed events and use them to change the style of an element to make it appear to light up and get pushed like a button. Note that only the first button gets pushed (the class defining the style is changed); the other three just light up. All of them light up on 1 second intervals (1000 milliseconds) and light up for half of a second (500 milliseconds). The appearance is similar to the classic handheld Simon game.

SimonTimedLightEventsAndPress.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<style type="text/css">
			.cButton {
				position:absolute;
				width:190px;
				height:190px;
				border:5px solid;
				margin-left:-100px;
				margin-top:-100px;
			}
			.cPressed {
				border:5px solid;
				border-color:#222222 #888888 #CCCCCC #444444;
			}
			.cReleased {
				border:5px solid;
				border-color:#CCCCCC #444444 #222222 #888888;
			}
		</style>
		<script type="text/javascript">
			function FInitialization() {
				setTimeout(FFlashOnLight0, 1000);
				setTimeout(FFlashOnLight1, 2000);
				setTimeout(FFlashOnLight2, 3000);
				setTimeout(FFlashOnLight3, 4000);
				setTimeout(FInitialization, 6000);
			}
			function FFlashOnLight0() {
				FTurnOnLight0();
				setTimeout(FTurnOffLight0, 500);
			}
			function FTurnOnLight0() {
				document.getElementById("idLight0").className = "cButton cPressed";
				document.getElementById("idLight0").style.backgroundColor = "red";
			}
			function FTurnOffLight0() {
				document.getElementById("idLight0").className = "cButton cReleased";
				document.getElementById("idLight0").style.backgroundColor = "maroon";
			}
			function FFlashOnLight1() {
				FTurnOnLight1();
				setTimeout(FTurnOffLight1, 500);
			}
			function FTurnOnLight1() {
				document.getElementById("idLight1").style.backgroundColor = "lime";
			}
			function FTurnOffLight1() {
				document.getElementById("idLight1").style.backgroundColor = "green";
			}
			function FFlashOnLight2() {
				FTurnOnLight2();
				setTimeout(FTurnOffLight2, 500);
			}
			function FTurnOnLight2() {
				document.getElementById("idLight2").style.backgroundColor = "yellow";
			}
			function FTurnOffLight2() {
				document.getElementById("idLight2").style.backgroundColor = "olive";
			}
			function FFlashOnLight3() {
				FTurnOnLight3();
				setTimeout(FTurnOffLight3, 500);
			}
			function FTurnOnLight3() {
				document.getElementById("idLight3").style.backgroundColor = "blue";
			}
			function FTurnOffLight3() {
				document.getElementById("idLight3").style.backgroundColor = "navy";
			}
		</script>
	</head>
	<body onload="FInitialization()">
		<div style="position:absolute; background-color:#aaaaaa; width:500px; height:500px;">
			<div class="cButton cReleased" id="idLight0" style="background-color: maroon; left:25%; top:25%;"></div>
			<div class="cButton cReleased" id="idLight1" style="background-color: green; left:75%; top:25%;"></div>
			<div class="cButton cReleased" id="idLight2" style="background-color: olive; left:25%; top:75%;"></div>
			<div class="cButton cReleased" id="idLight3" style="background-color: navy; left:75%; top:75%;"></div>
		</div>
	</body>
</html>

Core JavaScript

Simon Timed Event Lights

SimonTimedLightEventsAndPress.html

Output