Countdown Timer Plugin With Pure JavaScript – TimezZ

Category: Date & Time , Javascript | February 22, 2021
Author:BrooonS
Views Total:1,195 views
Official Page:Go to website
Last Update:February 22, 2021
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',
    canContinue: true,
    withYears: false,
    stop: false, // stop the countdown timer?
    beforeCreate() {},
    beforeDestroy() {},
    update(event) {},
});

Changelog:

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