Simple CountDown Clock jQuery Plugin with Custom Timezone

How to make use of it

1. Load the jQuery library and the jQuery countdown clock plugin on your internet 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 utilizing an unordered record.

<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 next CSS snippets to fashion 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 

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

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

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

5. Default settings for the countdown clock.

// Target date
date: null,

// time zone
offset: null,

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

Minimal jQuery Countdown Plugin, Jquery Countdown Timer, countdown plugin/Github

Changelog:

2020-08-03

• Hiding the container when reached 0.

See Demo And Download