<div class="countdown">
    <div data-now="1356953443" rel="1356953443" data-time="1460405400000" class="timerBrand clearfix">
        <div class="clock days first">
            <div class="digit_1"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="digit_2"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="label">DAYS</div>
        </div>
        <div class="clock hours">
            <div class="digit_1"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="digit_2"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="label">HOURS</div>
        </div>
        <div class="clock minutes">
            <div class="digit_1"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="digit_2"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="label">MIN</div>
        </div>
        <div class="clock seconds">
            <div class="digit_1"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="digit_2"><div class="upper">0</div><div class="lower">0</div></div>
            <div class="label">SEC</div>
        </div>
    </div>
</div>
body {background-color: #ccc}
.clock {color:#000; height:66px; float:left; font-family:'Helvetica'; font-size:40px; line-height:100%; margin-left:2%; position:relative; width:20.5%;
    .digit_1 {margin-right: 3.333333%;}
    .digit_1, .digit_2 {float:left; line-height:50px; position:relative; text-align:center; width:48.3333%;}
    .digit_1 .upper, .digit_2 .upper {height:19px; line-height:100%; overflow:hidden; padding-top:3px; background:url(https://github.com/pbilyk/codepen/blob/master/Countdown/contests_clock.png?raw=true) 50% 21px no-repeat #fff}
    .digit_1 .lower, .digit_2 .lower {height:23px; line-height:0px; margin-top:2px; overflow:hidden; background:url(https://github.com/pbilyk/codepen/blob/master/Countdown/contests_clock.png?raw=true) 50% 0 no-repeat #fff}
    .label {bottom:0px; clear:both; color:#fff; font-family:'Helvetica'; font-size:11px; line-height:20px; position:absolute; text-align:center; text-transform:uppercase; width:100%; background: #000;}
    .copy {color:#fff; font-family:'DINBold'; font-size:14px; margin-bottom:6px; text-transform:uppercase;}}
View Compiled
eventTimer = function() {
  eventTime = new Date ($('.timerBrand.clearfix').data('time'));
  currentTime = new Date ();
  timeToEvent = eventTime - currentTime;
  daysToEvent = Math.floor(timeToEvent/(60*60*1000*24)*1).toString().split("");
  hoursToEvent = Math.floor((timeToEvent%(60*60*1000*24))/(60*60*1000)*1).toString().split("");
  minutesToEvent = Math.floor((((timeToEvent%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)).toString().split("");
  secondsToEvent = Math.floor(((((timeToEvent%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)).toString().split("");

  if (timeToEvent > 0){
    if (daysToEvent.length == 1) {
      $('.clock.days .digit_1 div').text(0);
      $('.clock.days .digit_2 div').text(daysToEvent[0]); 
    } else {
      $('.clock.days .digit_1 div div').text(daysToEvent[0]);
      $('.clock.days .digit_2 div').text(daysToEvent[1]);
    }
  
    if (hoursToEvent.length == 1) {
      $('.clock.hours .digit_1 div').text(0);
      $('.clock.hours .digit_2 div').text(hoursToEvent[0]); 
    } else {
      $('.clock.hours .digit_1 div').text(hoursToEvent[0]);
      $('.clock.hours .digit_2 div').text(hoursToEvent[1]);
    }
  
    if (minutesToEvent.length == 1) {
      $('.clock.minutes .digit_1 div').text(0);
      $('.clock.minutes .digit_2 div').text(minutesToEvent[0]); 
    } else {
      $('.clock.minutes .digit_1 div').text(minutesToEvent[0]);
      $('.clock.minutes .digit_2 div').text(minutesToEvent[1]);
    }
  
    if (secondsToEvent.length == 1) {
      $('.clock.seconds .digit_1 div').text(0);
      $('.clock.seconds .digit_2 div').text(secondsToEvent[0]); 
    } else {
      $('.clock.seconds .digit_1 div').text(secondsToEvent[0]);
      $('.clock.seconds .digit_2 div').text(secondsToEvent[1]);
    }
  } else {
    $('.clock .digit_1 div').text(0);
    $('.clock .digit_2 div').text(0);
  }
}

window.setInterval(eventTimer, 1000);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js