Press "Enter" to skip to content

Simple CountDown Clock jQuery Plugin with Custom Timezone

jQuery Countdown Plugin – jQuery countdown plugin that accounts for timezone. A minimal jQuery countdown clock plugin which lets you depend on all the way down to a goal date time with the assist of customized UTC Timezone offset.

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

Official Website(epiksel): Click Here

This superior jQuery/javascript plugin is developed by epiksel. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.