Basic Counter Timer Plugin With jQuery - TimezZ
File Size: | 9.95 KB |
---|---|
Views Total: | 3545 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.