Basic Counter Timer Plugin With jQuery - TimezZ

TimezZ is a very basic jQuery countdown timer plugin which displays the remaining time (in years, months, days, hours and seconds) before a specified date.

The plugin currently works with a Vanilla JavaScript plugin.

How to use it:

1. Create a placeholder element for the countdown timer.

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

2. Insert both jQuery JavaScript library and the jQuery TimezZ plugin's script into the web page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jquery.timezz.js"></script>

3. Activate the timer and specify the date you'd like to countdown from.

$('#timer').timezz({
  'date' : 'January 1, 2040 00:00:00'
});

4. Config the countdown timer with the following settings.

$('#timer').timezz({
  'days' : 'd',
  'hours' : 'h',
  'minutes' : 'm',
  'seconds' : 's',
  'tagNumber' : 'span',
  'tagLetter' : 'i',
  'stop' : false
});

5. The result HTML.

<div id="timer">
  <span>84<i>d</i></span>
  <span>11<i>h</i></span>
  <span>27<i>m</i></span>
  <span>27<i>s</i></span>
</div>

6. Apply custom CSS styles to the countdown timer.

#timer {
  ...
}

#timer > span {
  ...
}

#timer > span > i {
  ...
}

Change log:

2017-11-13

• v2.1: added 'stop' setting.

2017-11-01

• v2.0: normally written: time and all more compactly

2017-10-08

• v1.3: new: output before calculate and rewritten under new standards

2017-10-05

• fixed min numbers in days

---

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