Skip to content

Instantly share code, notes, and snippets.

@Squizzer

Squizzer/countdown timer

Created October 17, 2012 02:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Squizzer/3903328 to your computer and use it in GitHub Desktop.
Save Squizzer/3903328 to your computer and use it in GitHub Desktop.
Download ZIP
A html/js countdown timer with some comments to help you :)
Raw
countdown timer
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function cdtd() {
var wo = new Date("August 13, 2013 10:30:30");
var now = new Date();
var timeDiff = wo.getTime() - now.getTime();
if (timeDiff <= 0) {
clearTimeout(timer);
document.write("Welcome to the new site. If you are seeing this then something went wrong in our code. We'll Fix It ASAP!");
// run any code needed for when the timer is done ex Publish the real site :)
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
// some math that makes miliseconds to seconds, and seconds to minutes, and minutes to hours, hours to days.
hours %= 24;
minutes %= 60;
seconds %= 60;
// this limits the hours to 24, and minutes to 60, and seconds to 60. So we dont have it showing up like 10997265517 seconds till "insert date here"
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;
var timer = setTimeout('cdtd()',1000);
}
</script>
</head>
<body>
Days
<div id="daysBox"></div>
Hours
<div id="hoursBox"></div>
Minutes
<div id="minsBox"></div>
Seconds
<div id="secsBox"></div>
<script type="text/javascript">cdtd();</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment