Countdown Timer Plugin With Pure JavaScript – TimezZ

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