jQuery Plugin To Create A Countdown Timer In Milliseconds - yuukCountdown.js

yuukCountdown.js is a simple, straightforward jQuery plugin used to create a timer clock that counts down in days, hours, minutes, seconds and milliseconds to a given date time, with support for custom starting/ending times and callback functions.

How to use it:

1. Build the html structure for the countdown timer.

<div class="countdown">
  <div class="countdown-time">
    <ul class="clearfix" id="js-countDown">
      <li class="item"><i class="day">00</i><span>days</span></li>
      <li class="blank">:</li>
      <li class="item"><i class="hour">00</i><span>hours</span></li>
      <li class="blank">:</li>
      <li class="item"><i class="minute">00</i><span>minutes</span></li>
      <li class="blank">:</li>
      <li class="item"><i class="second">00</i><span>seconds</span></li>
      <li class="blank">:</li>
      <li class="item"><i class="ms">00</i><span>milliseconds</span></li>
    </ul>
  </div>
</div>

2. Load jQuery library and the jQuery yuukCountdown.js script in the page when needed.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jQuery.yuukCountdown.js" ></script>

3. Enable the plugin and specify the starting / ending times.

$('#js-countDown').yuukCountDown({
  starttime: '2016/11/10 00:00:00',
  endtime: '2016/12/24 23:59:59',
});

4. Apply your own CSS styles to the countdown timer.

.countdown {
  width: 720px;
  height: 114px;
  padding: 20px 0;
  text-align: center;
  background-color: #682a1a;
  margin: 100px auto;
  overflow: hidden;
  border-radius: 10px;
}

.countdown-time {
  display: block;
  text-align: center;
}

.countdown-time ul { display: inline-block; }

.countdown-time li {
  float: left;
  text-align: center;
  height: 114px;
}

.countdown-time li.blank {
  line-height: 90px;
  width: 15px;
  color: #ffb33d;
  font-size: 50px;
}

.countdown-time li.item { width: 110px; }

.countdown-time i {
  display: block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  font-size: 60px;
  font-weight: bold;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  background: #fff;
  color: #ffb33d;
}

.countdown-time span {
  display: block;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin-top: 10px;
}

5. All default options and callback functions.

$('#js-countDown').yuukCountDown({
  starttime: '', 
  endtime: '',
  startCallBack: $.noop, 
  notStartCallBack: $.noop,
  endCallBack: $.noop 
});

---

This awesome jQuery plugin is developed by yuuk. For more Advanced Usages, please check the demo page or visit the official website.