RochCass: Javascript Countdown

I recently needed a simple javascript countdown and thought would be easier to create one rather than using a complicated existing one. In the following demo, I'm getting date now and add only 1 minute to it for the count down. As soon as the countdown reaches zero seconds, the countdown will be hidden and another element would show.

HTML <div id="countdown" class="countdown-wrapper" style="display: block;">
<div class="countdown">
  <div class="timer-holder">
    <div class="timer-slot">
      <div id="CountDownDays" class="timer-time"> </div>
      <div class="timer-title"> Days </div>
    <div class="timer-slot">
      <div id="CountDownHours" class="timer-time"> </div>
      <div class="timer-title"> Hours </div>
    <div class="timer-slot">
      <div id="CountDownMinutes" class="timer-time"> </div>
       <div class="timer-title"> Minutes </div>
    <div class="timer-slot">
      <div id="CountDownSeconds" class="timer-time"> </div>
      <div class="timer-title"> Seconds </div>
  <div class="clearfix"></div>

<div id="showMsg" style="font-size: 54px; display: none;"> Time Up !!</div>

CSS .countdown-wrapper { padding:50px 0px; }
.countdown { margin:0 auto; padding: 10px 20px; border-radius: 4px;
      -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.timer-holder { margin: 0 auto; text-align: center; width: 350px; }
.timer-slot { width: 65px; border: 1px solid #ccc; float: left; text-align: center;
      background-color: #F7F7F7; color: #323232; margin: 5px; padding: 5px;
      border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.timer-time {font-family: arial; font-size: 58px; }
.timer-title {font-family: arial; font-size: 13px; padding: 3px 0px; }
.clearfix { float:none; clear: both; margin-bottom: 0 !important; }

Javascript var dateNow = new Date();
var countdown_date = new Date(new Date().setMinutes(dateNow.getMinutes() + 1));
var days, hours, minutes, seconds;

// update every 1 second
var timer = setInterval(function () {CountdownTimer()}, 1000);
function CountdownTimer() {
  // calculate difference between now and countdown date
  var current_date = new Date().getTime();
  var seconds_left = (countdown_date - current_date) / 1000;

  // 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);

  document.getElementById("CountDownDays").innerHTML = (days);
  document.getElementById("CountDownHours").innerHTML = (hours);
  document.getElementById("CountDownMinutes").innerHTML = (minutes);
  document.getElementById("CountDownSeconds").innerHTML = (seconds);

  if(seconds_left <= 0)
    document.getElementById("showMsg").style.display = "block";
    document.getElementById("countdown").style.display = "none";

If you would like to specify a specific date replace the 2nd line of the Javascript with:

var countdown_date = new Date(2014, 13 - 1, 25, 12, 00).getTime();

Where 1st parameter is the year, the 2nd is the month - 1, 3rd is the date and last 2 parameters are hours and minutes.

Goodluck :)

Back to Article