Press "Enter" to skip to content

Easily Make a Stopwatch or Timer on Your Site With Pure JavaScript | TimezZ

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


See Demo And Download

Official Website(BrooonS): Click Here

This superior jQuery/javascript plugin is developed by BrooonS. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.