Skip to content

Instantly share code, notes, and snippets.

@kiichi

kiichi/Countdown Clock

Created September 8, 2014 15:04
Show Gist options
  • Save kiichi/37e44a46a0536c13e9a5 to your computer and use it in GitHub Desktop.
Save kiichi/37e44a46a0536c13e9a5 to your computer and use it in GitHub Desktop.
Download ZIP
Set targetDate and calculate countdown until specific date in JavaScript
Raw
Countdown Clock
<html>
<body style="background-color:gray">
<div class="col-md-6 col-md-offset-3">
<p class="lead ultra-bold" style="color: #fff; text-align: center; margin-top: 17px; font-size: 36px;">
<span id="ct-days"></span><span style="color: #b5e2e4;">DAYS</span>
<span id="ct-hours"></span><span style="color: #b5e2e4;">HOURS</span>
<span id="ct-mins"></span><span style="color: #b5e2e4;">MINS</span>
</p>
</div>
<script>
var targetDate = "9/12/2014";
var myVar=setInterval(function () {myTimer()}, 1000);
function myTimer() {
var date1 = new Date();
var date2 = new Date(targetDate);
var totalMSec = date2 - date1;
var dayInMSec = (60*60*24*1000);
var hourInMSec = (60*60*1000);
var minInMSec = (60*1000);
var days = parseInt(totalMSec/dayInMSec);
var hours = parseInt( (totalMSec-days*dayInMSec)/hourInMSec );
var minutes = parseInt( (totalMSec-days*dayInMSec-hours*hourInMSec)/minInMSec );
document.getElementById("ct-days").innerHTML=days;
document.getElementById("ct-hours").innerHTML=hours;
document.getElementById("ct-mins").innerHTML=minutes;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment