timezz

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

  • timezz

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
timezz
4317.0.02 years ago7 years agoMinified + gzip package size for timezz in KB

Readme

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

npm version

Features

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

Table of Contents

- Install - HTML - Initialization - element - date - pause - stopOnZero - beforeCreate - beforeUpdate - update - destroy - init - TimezZ - UpdateEvent

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/timezz@7.0.0/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/timezz@7.0.0/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. Every data attribute isn't mandatory, TimezZ will recalculate time to smaller numbers.
For example: - if you don't have years, a timer will add these years to days - if you don't have days, a timer will add these days to hours - and so on
<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>

Initialization

ES6

TimezZ as an ES6 module.
import timezz from 'timezz';

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

Node

TimezZ as a Node.js module
const timezz = require('timezz');

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

Browser

Exports a global variable called timezz. Use it like this
<script>
  timezz(document.querySelector('.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(document.querySelector('.timer'), {
    date: new Date(),
  });
});

Parameters

Full config with filled params:
timezz(document.querySelector('.timer'), {
  date: new Date(),
  pause: false,
  stopOnZero: true,
  beforeCreate() {},
  beforeUpdate() {},
  update(event) {},
});

element

  • type: HTMLElement
  • required true

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

date

Date from and to which you want to count. Preferred Date.
  • type: Date | string | number
  • required true

// Date instance
new Date('1996-05-27 03:15');

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

// Timestamp
833156100000

pause

Is the timer can updating every second?
  • type: boolean
  • default: false
  • required false

Can update after initialization.
const timer = timezz(document.querySelector('.timer'), {
  date: new Date(),
});

timer.pause = true;

stopOnZero

Should the timer continue after end of date point? Only for date in future.
  • type: boolean
  • default: true
  • required false

Can update after initialization.
const timer = timezz(document.querySelector('.timer'), {
  date: new Date(),
});

timer.stopOnZero = false;

beforeCreate

The function will be called before instance initialization
  • type: function
  • default: undefined
  • required false

Can set after initialization.
const timer = timezz(document.querySelector('.timer'), {
  date: new Date(),
});

timer.beforeCreate = () => {};

beforeUpdate

The function will be called on before each second with an event.
  • type: function
  • default: undefined
  • required false

Can set after initialization.
const timer = timezz(document.querySelector('.timer'), {
  date: new Date(),
});

timer.beforeUpdate = () => {};

update

The function will be called on each second with an event.
  • type: function
  • default: undefined
  • required false

Can set after initialization.
const timer = timezz(document.querySelector('.timer'), {
  date: new Date(),
});

timer.update = (event) => {};

API

destroy

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

timer.destroy();

init

After destroy you can init instance again.
const timer = timezz(document.querySelector('.timer'), {
  date: new Date(),
});

timer.destroy();

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

Interfaces

Timezz

The interface can be declared as a type of instance.
import timezz, { Timezz } from 'timezz';

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

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

UpdateEvent

The interface will be sent on each call of the update method.
import { UpdateEvent } from 'timezz';

const data: {
  info: UpdateEvent | null,
} = {
  info: null,
};

const timer = timezz(document.querySelector('.timer'), {
  date: new Date('1996-05-27 03:15'),

  update(event) {
    data.info = event;
  },
});