Easily Make a Stopwatch or Timer on Your Site With JavaScript

TimezZ is the standalone version of the jQuery plugin that lets you create a customizable countdown timer in the format days: hours: minutes: seconds. With this plugin, you can easily create a stopwatch or timer on your site. Just create style, and have fun.

stopwatch clock, timer clock, timer countdown, stopwatch download, countdown timer download, google timer, countdown timer for website

How to make use of it:

Create a container during which you need to show 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 primary countdown timer.

new TimezZ('.demo', {
    date: 'Jan 1, 2020'
});

Apply your individual kinds to the countdown timer.

.demo i {
  color: #bbb;
  font-size: 40px;
}

.demo span {
  text-transform: uppercase;
  color: #bbb;
}

Possible plugin choices 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) {},
});

Countdown Timer Plugin, TimezZ Github, stopwatch with lap