Minimal jQuery Countdown Plugin with Custom Timezone - Countdown Clock

A minimal jQuery countdown clock plugin which allows you to count down to a target date time with the support of custom UTC Timezone offset.

How to use it:

1. Load jQuery library and the jQuery countdown clock plugin in your web page.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="jquery.countdown.min.js"></script>

2. Create the Html for a countdown clock using unordered list.

<ul id="example">
  <li><span class="days">00</span><p class="days_text">Days</p></li>
  <li class="seperator">:</li>
  <li><span class="hours">00</span><p class="hours_text">Hours</p></li>
  <li class="seperator">:</li>
  <li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li>
  <li class="seperator">:</li>
  <li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li>
</ul>

3. Add the following CSS snippets to style the countdown clock.

ul#example {
  list-style: none;
  margin: 50px 0;
  padding: 0;
  display: block;
  text-align: center;
}

ul#example li { display: inline-block; }

ul#example li span {
  font-size: 80px;
  font-weight: 300;
  line-height: 80px;
}

ul#example li.seperator {
  font-size: 80px;
  line-height: 70px;
  vertical-align: top;
}

ul#example li p {
  color: #a7abb1;
  font-size: 25px;
}

4. Initialize the countdown clock and specify the target date time.

$('#example').countdown({
date: '12/24/2020 23:59:59'
}, function () {
  alert('Merry Christmas!');
});

5. Default settings for the countdown clock.

// Target date
date: null,

// time zone
offset: null,

// Countdown text
day: 'Day',
days: 'Days',
hour: 'Hour',
hours: 'Hours',
minute: 'Minute',
minutes: 'Minutes',
second: 'Second',
seconds: 'Seconds'

Changelog:

2020-08-09

• v1.0.2

2020-08-03

• Hiding the container when reached 0.

2019-01-19

• Bugfix

2015-11-21

• JS update

---

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