geekforbrains · October 7, 2015 21:05
diff --git a/source.html b/source.html
 <!doctype html> 
 <html>
 <head>
 <meta charset="utf-8">
 <title>3, 2, 1 - Go!</title>
 <style>
 #countdown {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    display: none;
    margin: -50px 0 0 -50px;
    border: 2px solid #cecece;
    background-color: #fefefe;
    text-align: center;
    line-height: 100px;
    font-size: 60px;
    font-family: sans-serif;
 }
 </style>
 </head>

 <body>
 <a id="startCountdown" href="#">Start</a>
 <div id="countdown"></div>

 <script>
 function doCountdown() {
    var start = 1;
    var finish = 3;
    var message = "Go";
    var url = "http://google.com";
    var colors = [
        "green", // 1
        "blue", // 2
        "orange", // 3
        "red"  // Go
    ];
    
    var element = document.getElementById("countdown");
    element.style.display = "block";
    
    var loopCountdown = function(count) {
        element.innerHTML = ''+count;
        element.style.color = colors[count-1];
        
                setTimeout(function() {
            console.log(count);
                if(count < finish) {
                loopCountdown(++count);
                } else {
                element.innerHTML = message;
                element.style.color = colors[colors.length - 1];
                window.location.replace(url);
                }
                }, 1000);
    }
    
    loopCountdown(start);
 }

 document.getElementById("startCountdown").onclick = doCountdown;
 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>3, 2, 1 - Go!</title>
	<style>
	#countdown {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 100px;
	display: none;
	margin: -50px 0 0 -50px;
	border: 2px solid #cecece;
	background-color: #fefefe;
	text-align: center;
	line-height: 100px;
	font-size: 60px;
	font-family: sans-serif;
	}
	</style>
	</head>

	<body>
	<a id="startCountdown" href="#">Start</a>
	<div id="countdown"></div>

	<script>
	function doCountdown() {
	var start = 1;
	var finish = 3;
	var message = "Go";
	var url = "http://google.com";
	var colors = [
	"green", // 1
	"blue", // 2
	"orange", // 3
	"red" // Go
	];

	var element = document.getElementById("countdown");
	element.style.display = "block";

	var loopCountdown = function(count) {
	element.innerHTML = ''+count;
	element.style.color = colors[count-1];

	setTimeout(function() {
	console.log(count);
	if(count < finish) {
	loopCountdown(++count);
	} else {
	element.innerHTML = message;
	element.style.color = colors[colors.length - 1];
	window.location.replace(url);
	}
	}, 1000);
	}

	loopCountdown(start);
	}

	document.getElementById("startCountdown").onclick = doCountdown;
	</script>
	</body>
	</html>