Author: | BrooonS |
---|---|
Views Total: | 2,003 views |
Official Page: | Go to website |
Last Update: | March 28, 2022 |
License: | MIT |
Preview:

Description:
This is the standalone version of the jQuery TimezZ plugin that lets you create a customizable countdown timer in days:hours:minutes:seconds format.
How to use it:
Create a container in which you want to display the countdown timer.
<div class="timer"> Years: <div data-years></div> Days: <div data-days></div> Hours: <div data-hours></div> Minutes: <div data-minutes></div> Seconds: <div data-seconds></div> </div>
Import the TimezZ. // As an es module import timezz from 'timezz'; // From a CDN <script src="https://cdn.jsdelivr.net/npm/timezz/dist/timezz.min.js"></script>
The JavaScript to generate a basic countdown timer.
new TimezZ('.demo', { date: 'Jan 1, 2020' });
Apply your own styles to the countdown timer.
.demo i { color: #bbb; font-size: 40px; } .demo span { text-transform: uppercase; color: #bbb; }
Possible plugin options to customize your countdown timers.
new TimezZ('.demo', { date: 'Jan 01, 2040 00:00:00', stopOnZero: true, withYears: false, pause: false, // stop the countdown timer? beforeCreate() {}, beforeDestroy() {}, update(event) {}, });
Changelog:
v7.0.0 (03/28/2021)
- Update template rendering, now you can use not all data attributes, TimezZ will recalculate needed numbers
- Remove useless callbacks
- Update packages
- Remove functions that allowed to init array of elements, now you can set only HTML Element
- Rename TypeScript interfaces
- Change variable name canContinue to stopOnZero
- Change variable name stop to pause
v6.1.1 (02/22/2021)
- fix date parser and update packages
v6.1.0 (02/01/2021)
- New withYears: variable to count years
- New isDestroyed: variable in the instance
- New updateElements: now you can update elements manually
- Change getting elements method
- Other fixes
v4.0.1 (10/30/2018)
- Small factor