Countdown Timer Plugin With Pure JavaScript

Countdown Timer Plugin With Pure JavaScript

TimezZ With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy. Countdown Timer Plugin With Pure JavaScript

TimezZ

With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy.

Features

  • Typescript support
  • Support all environments
  • Easy customization
  • Simple and lightweight

Demo

Demo

Quick start

Install

We support all platforms.

npm

For module bundlers such as Webpack or Browserify.

npm i timezz
Include with <script>

Download and install with script.

<script src="timezz.min.js"></script>
CDN

Recommended for learning purposes, you can use the latest version:

<script src="https://cdn.jsdelivr.net/npm/timezz/dist/timezz.min.js"></script>

Recommended for production for avoiding unexpected breakage from newer versions:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/timezz.min.js"></script>

For native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import timezz from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/timezz.min.js';
</script>

HTML

Here is a base HTML markup for your timer/stopwatch. Main part of HTML are data attributes for render numbers of years, days, hours, minutes, seconds.

<div class="timer">
  Years: <div data-years></div> <!-- Works only with parameter `withYears: true` -->
  Days: <div data-days></div>
  Hours: <div data-hours></div>
  Minutes: <div data-minutes></div>
  Seconds: <div data-seconds></div>
</div>

Initialization

ES6

TimezZ as an ES6 module.

import timezz from 'timezz';

timezz('.timer', {
  date: new Date(),
});
Node

TimezZ as a Node.js module

const timezz = require('timezz');

timezz('.timer', {
  date: new Date(),
});
Browser

Exports a global variable called timezz. Use it like this

<script>
  timezz('.timer', {
    date: new Date(),
  });
</script>
AMD

TimezZ as an AMD module. Use with Require.js, System.js, and so on.

requirejs(['timezz'], function(timezz) {
  timezz('.timer', {
    date: new Date(),
  });
});

Parameters

Full config with filled params:

timezz('.timer', {
  date: new Date(),
  stop: false,
  canContinue: true,
  withYears: false,
  beforeCreate() {},
  beforeDestroy() {},
  update(event) {},
});

selector

Note: if your DOM elements will be removed or replaced, need to call updateElements method.

  • type: string | HTMLElement | Array<HTMLElement>
  • required true
// String
timezz('.timer');

// HTMLElement
timezz(document.querySelector('.timer'));

// Array of HTMLElements
timezz(document.querySelectorAll('.timer'));

date

Date from and to which you want to count.

  • type: Date | string | number
  • required true
// Date instance
new Date('1996-05-27 03:15');

// String
'1996-05-27 03:15'

// Timestamp
833156100000

stop

Is the timer stopped?

  • type: boolean
  • default: false
  • required false

Can update after initialization.

const timer = timezz('.timer', {
  date: new Date(),
});

timer.stop = true;

canContinue

Can TimezZ continue after end of date point?

  • type: boolean
  • default: false
  • required false

Can update after initialization.

const timer = timezz('.timer', {
  date: new Date(),
});

timer.canContinue = true;

withYears

Note: if the property is enabled, the days will be counted differently.

Do you want to count the years?

  • type: boolean
  • default: false
  • required false

Can update after initialization.

const timer = timezz('.timer', {
  date: new Date(),
});

timer.withYears = true;

beforeCreate

The function will be called before initialization.

  • type: function
  • default: undefined
  • required false

Can set after initialization.

const timer = timezz('.timer', {
  date: new Date(),
});

timer.beforeCreate = function() {}

beforeDestroy

The function will be called before destroy.

  • type: function
  • default: undefined
  • required false

Can set after initialization.

const timer = timezz('.timer', {
  date: new Date(),
});

timer.beforeDestroy = function() {}

update

The function will be called on each second with an event.

  • type: function
  • default: undefined
  • required false

Here is event object which be send on each second.

{
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  distance: number;
  isTimeOver: boolean;
}

Can set after initialization.

const timer = timezz('.timer', {
  date: new Date(),
});

timer.update = function(event) {}

API

destroy

const timer = timezz('.timer', {
  date: new Date(),
});

timer.destroy();

init

After destroy you can init instance again.

const timer = timezz('.timer', {
  date: new Date(),
});

timer.destroy();

setTimeout(() => {
  timer.init();
}, 1000);

updateElements

If your elements were removed or replaced, you can update elements in your timezz.

const timer = timezz('.timer', {
  date: new Date(),
});

// String
timer.updateElements('.timer');

// HTMLElement
timer.updateElements(document.querySelector('.timer'));

// Array of HTMLElements
timer.updateElements(document.querySelectorAll('.timer'));

Interfaces

Timezz

import timezz, { Timezz } from 'timezz';

The interface can be declared as a type of instance.

const plugins: {
  timezz: Timezz,
} = {
  timezz: null,
};

plugins.timezz = timezz('.timer', { date: new Date('1996-05-25 03:15') });

IUpdateEvent

import { IUpdateEvent } from 'timezz';

The interface will be sent on each call of the update method.

interface IUpdateEvent {
  years: number;
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  distance: number;
  isTimeOver: boolean;
}

const data: {
  info: IUpdateEvent,
} = {
  info: null,
};

const timer = timezz('.timer', {
  date: new Date('1996-05-25 03:15'),
  update(event) {
    data.info = event;
  },
});

Download Details:

Author: BrooonS

Source Code: https://github.com/BrooonS/TimezZ

javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

What is JavaScript - Stackfindover - Blog

What is PHP: - Who invented PHP, how it works, answers to all such questions about PHP, and much other information, you are going to

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Learn JavaScript - Full Course for Beginners. DO NOT MISS!!!

In this video tutorial, we'll learn Learn JavaScript - Full Course for Beginners. This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language. DO NOT MISS!!!