Countdown

HTMl
<h1>lebaran</h1>
<div class="countdown">
    <div data-time="1368630000" 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">Hari</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">Jam</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">Menit</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">Detik</div>
        </div>
    </div>
</div>
<div id="Debug"></div>

CSS
Body{
  font-family:'Helvetica';
}

#Debug{
    position:fixed;
    bottom:5px;
    right:5px;
  background:#111;
  color:#444;
  padding:5px;
  font-size:10px;
}

.clock {
  color:#aaa;
  height:63px;
  float:left;
  font-size:35px;
  line-height:100%;
  margin-left:10px;
  position:relative;
  width:75px;
  .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: 50% 21px no-repeat #222
  }
  .digit_1 .lower, .digit_2 .lower {
    height:23px;
    line-height:0px;
    margin-top:2px;
    overflow:hidden;
    background: 50% 0 no-repeat #222
  }
  .label {
    bottom:0px;
    clear:both;
    color:#fff;
    font-family:'Helvetica';
    font-size:12px;
    line-height:20px;
    position:absolute;
    text-align:center;
    text-transform:uppercase;
    width:100%;
    background: #444;
  }
  .copy {
    color:#fff;
    font-family:'DINBold';
    font-size:14px;
    margin-bottom:6px;
    text-transform:uppercase;}
}
Script
eventTimer = function() {
  eventTime = new Date(2016, 06, 06, 0, 0, 0, 0);
  currentTime = new Date ();
  timeToEvent = eventTime - currentTime;
  timeToEventround = Math.floor( timeToEvent / 1000 );
  daysToEvent = Math.floor(timeToEventround/(60*60*24)).toString().split("");
  hoursToEvent = Math.floor((timeToEventround%(60*60*24))/(60*60)).toString().split("");
  minutesToEvent = Math.floor((((timeToEventround%(60*60*24))%(60*60))/(60))).toString().split("");
  secondsToEvent = Math.floor(((((timeToEventround%(60*60*24))%(60*60))%(60)))).toString().split("");
  calculo = "Ponga aqui lo que quiere revisar..."
 
    $("#Debug").text("Debug info: Event Time: " + eventTime + " ||| " + "Current Time: " + currentTime + " ||| " + "Time To Event: " + timeToEvent + " ||| " + "Time To Event Round: " + timeToEventround + " ||| " + "Calculo: " + calculo );
 
 

  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').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);

ramadhan countdown

CSS
    #ramadhan {background:transparent;color:#37B185;font-family:Oswald, Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
      .teks {color:white}
  
HTML
<div id="ramadhan">
    <span id="countdown">0 <span class="teks">hari</span> -15 <span class="teks">jam</span> -19 <span class="teks">menit</span> -7 <span class="teks">detik menuju bulan Ramadhan</span> 2016 M / 1437 H</span>
    </div>
Script
    //<![CDATA[
    // set the date we're counting down to
    var target_date = new Date("June 6, 2016").getTime();
    // variables for time units
    var days, hours, minutes, seconds;
    // get tag element
    var countdown = document.getElementById("countdown");
    // update the tag with id "countdown" every 1 second
    setInterval(function () {
        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (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
      countdown.innerHTML = days + " <span class=\'teks\'>hari</span> " + hours + " <span class=\'teks\'>jam</span> "
      + minutes + " <span class=\'teks\'>menit</span> " + seconds + " <span class=\'teks\'>detik menuju bulan Ramadhan</span> 2016 M / 1437 H";

    }, 1000);
    //]]>
    </script>
</div>