Last active
August 29, 2015 14:05
-
-
Save kyledinh/a866d64d0b50c4003142 to your computer and use it in GitHub Desktop.
Simple Countdown Clock with a queue - example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title></title> | |
</head> | |
<body> | |
<h2><span id="countdown_clock"></span></h2> | |
<p>This is a countdown clock</p> | |
<script> | |
function Countdowner (id, timestamp) { | |
this.target_date = timestamp || null; // new Date("Dec 25, 2021").getTime(); | |
this.id = id || "countdown_clock"; | |
} | |
Countdowner.prototype.display = function (queue) { | |
var dom_target = document.getElementById(this.id); | |
if (queue === null || queue.length === 0) { | |
dom_target.innerHTML = "Nothing in Queue"; | |
return null; | |
} | |
this.target_date = queue[0]; | |
var days, hours, minutes, seconds; | |
// find the amount of "seconds" between now and target | |
var current_date = new Date().getTime(); | |
var seconds_left = (this.target_date - current_date) / 1000; | |
// do some time calculations | |
days = parseInt(seconds_left / 86400); | |
seconds_left = seconds_left % 86400; | |
hours = parseInt(seconds_left / 3600); | |
seconds_left = seconds_left % 3600; | |
minutes = parseInt(seconds_left / 60); | |
seconds = parseInt(seconds_left % 60); | |
// format countdown string + set tag value | |
dom_target.innerHTML = days + "d, " + hours + "h, " | |
+ minutes + "m, " + seconds + "s"; | |
} | |
// TWO OBJECT to manage in Javascript | |
var queue = [new Date("Jan 1, 2015").getTime(), | |
new Date("Oct 1, 2014").getTime(), | |
new Date("Dec 13, 2014").getTime()]; | |
var cd = new Countdowner("countdown_clock"); | |
// Timers | |
setInterval(function () { | |
cd.display(queue); | |
}, 1000); | |
setInterval(function () { | |
queue.shift(); | |
cd.display(queue); | |
console.log("4000"); | |
console.log(queue); | |
}, 4000); | |
setInterval(function () { | |
var ts = Date.now() + Math.floor(Math.random() * 600000); | |
queue.push(ts); | |
console.log("7000"); | |
cd.display(queue); | |
}, 7000); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment