Skip to content

Instantly share code, notes, and snippets.

@geekforbrains
Created October 7, 2015 21:05
Show Gist options
  • Save geekforbrains/1a0ee5bf9cf5545be33d to your computer and use it in GitHub Desktop.
Save geekforbrains/1a0ee5bf9cf5545be33d to your computer and use it in GitHub Desktop.
3, 2, 1 Go!
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment