Skip to content

Instantly share code, notes, and snippets.

@kyledinh
Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kyledinh/a866d64d0b50c4003142 to your computer and use it in GitHub Desktop.
Save kyledinh/a866d64d0b50c4003142 to your computer and use it in GitHub Desktop.
Simple Countdown Clock with a queue - example
<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