Plain Text Countdown Timer with jQuery and Moment.js - Countdown Clock

Countdown Clock is a small plain jQuery countdown timer plugin which counts down in years, months, days, hours, minutes, seconds to a given date.

How to use it:

1. Load the necessary jQuery library and moment.js in your document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="moment.min.js"></script>

2. Download and load the jQuery countdown clock plugin after jQuery.

<script src="countdown-clock.min.js"></script>

3. Create an empty container for the countdown timer.

<div id="countdown-clock"></div>

4. Initialize the countdown timer and specify the date you wish to count down to.

$('#countdown-clock').countdownClock({date: '2025-06-16'});

5. This will generate a plain text countdown timer with the following markup into the container you just created. So you can easily to style it whatever you like.

<div id="countdown-clock">
  <div class="countdown-clock">
      <span class="years"></span> Years
      <span class="months"></span> Months
      <span class="days"></span> Days
      <span class="hours"></span> Hours
      <span class="minutes"></span> Minutes
      <span class="seconds"></span> Seconds
  </div>
</div>

.countdown-clock {
  ...
}

.countdown-clock .years,
 .countdown-clock .months,
 .countdown-clock .days,
 .countdown-clock .hours,
 .countdown-clock .minutes,
 .countdown-clock .seconds {
  ...
}

.countdown-clock span:first-of-type { ... }

6. The default options.

dateFormat: "YYYY-MM-DD",
date: undefined,
showYears: false,
showMonths: true,
showDays: true,
showHours: true,
showMinutes: true,
showSeconds: true,
updateInterval: 1, // Seconds,
containerClass: 'countdown-clock',
containerTag: 'div'

---

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