Countdown Timer Plugin With Pure JavaScript – TimezZ

Category: Date & Time , Javascript | October 30, 2018
Author: BrooonS
Views Total: 2,634
Official Page: Go to website
Last Update: October 30, 2018
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 demo"></div>

Import the JavaScript file ‘TimezZ.js’ into the html file.

<script src="TimezZ.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',
    daysName: 'd',
    hoursName: 'h',
    minutesName: 'm',
    secondsName: 's',
    numberTag: 'span',
    letterTag: 'i',
    stop: false, // stop the countdown timer?
});

Changelog:

v4.0.1 (10/30/2018)

  • Small factor

You Might Be Interested In:


Leave a Reply