Countdown Timer Plugin With Pure JavaScript – TimezZ

Category: Date & Time , Javascript | March 28, 2022
Author:BrooonS
Views Total:2,003 views
Official Page:Go to website
Last Update:March 28, 2022
License:MIT

Preview:

Countdown Timer Plugin With Pure JavaScript – TimezZ

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

You Might Be Interested In:


Leave a Reply