java 543traficlight

<html>
	<head>
		<style>
			#display{
				text-align:center;
				font-size:100px;
			}
			table{
				width:100px;
				height:300px;
				border:5px solid black;
				border-collapse:collapse;
				background:gray;
				margin-left:40%;
			}
			td{
				border:5px solid black;
				border-collapse:collapse;
			}
			.green{
				background:green;
			}
			.red{
				background:red;
			}
			.yellow{
				background:yellow;
			}
		</style>
		<script>
			var time = 6;
			var t;
			function startTime(){
				time--;
				if(time<=2){
					clearTimeout(t);
					showBlock();
				}else{
					document.getElementById("display").innerHTML=time;
					t=setTimeout("startTime()",1000);
				}
			}

			function showBlock(){
				var block;

				switch(time){
					case 2:
						block="<table><tr><td class='red'></td></tr><tr><td></td></tr><tr><td></td></tr></table>";
						break;
					case 1:
						block="<table><tr><td></td></tr><tr><td class='yellow'></td></tr><tr><td></td></tr></table>";
						break;
					case 0:
						block="<table><tr><td></td></tr><tr><td></td></tr><tr><td class='green'></td></tr></table>";
						break;
					default:
						break;
				}
				if(time<0){
					time = 6;
					clearTimeout(t);
					startTime();
				}else{
					document.getElementById("display").innerHTML=block;
					time--;
					t = setTimeout("showBlock()",1000);
				}
			}
		</script>
	</head>
	<body onload="startTime()">
		<div id="display">
			5
		</div>
	</body>
</html>