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

Author : Agus Junaidy

Share this

Related Posts