geekforbrains/source.html

## 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>