Countdown Timer Plugin With Pure JavaScript – TimezZ

Category: Date & Time , Javascript | February 1, 2021

0 Comment

Demo Download

AUTHOR:	BrooonS
VIEWS TOTAL:	152 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	February 1, 2021
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',
    canContinue: true,
    withYears: false,
    stop: false, // stop the countdown timer?
    beforeCreate() {},
    beforeDestroy() {},
    update(event) {},
});

Changelog:

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