Easy Digital Countdown Clock Plugin With jQuery

countdown-timer.js is a very small jQuery plugin for creating an easy-to-style digital clock to count down from a specific date on your coming soon/under construction pages and event landing pages.

How to use it:

1. Create an empty element for the countdown timer plugin.

<div class="timer" id="countdown"></div>

2. Download and include the countdown-timer.js plugin after jQuery library (slim build is recommended):

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="countdown-timer.js"></script>

3. The JavaScript to render a countdown timer in the container element you just created.

var myDate = new Date();
myDate.setDate(myDate.getDate() + 2);
$("#countdown").countdown(myDate, function (event) {
  $(this).html(
      event.strftime(
          '<div class="timer-wrapper"><div class="time">%D</div><span class="text">days</span></div><div class="timer-wrapper"><div class="time">%H</div><span class="text">hrs</span></div><div class="timer-wrapper"><div class="time">%M</div><span class="text">mins</span></div><div class="timer-wrapper"><div class="time">%S</div><span class="text">sec</span></div>'
      )
  );
});

4. Style the countdown timer using your own CSS styles.

.timer {
  padding: 10px;
  text-align: center;
  padding-top: 15px;
}

.timer .timer-wrapper {
  display: inline-block;
  width: 60px;
  height: 50px;
}

.timer .timer-wrapper .time {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
}

.timer .timer-wrapper .text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

---

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