https://github.com/letstri/timezz
With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy.
https://github.com/letstri/timezz
commonjs es6 javascript js library plugin repeat stopwatch time timer timezz typescript ui webpack
Last synced: about 2 months ago
JSON representation
With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy.
- Host: GitHub
- URL: https://github.com/letstri/timezz
- Owner: letstri
- License: mit
- Created: 2017-09-24T21:38:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-25T21:18:30.000Z (10 months ago)
- Last Synced: 2025-04-03T01:28:48.055Z (10 months ago)
- Topics: commonjs, es6, javascript, js, library, plugin, repeat, stopwatch, time, timer, timezz, typescript, ui, webpack
- Language: TypeScript
- Homepage:
- Size: 2.01 MB
- Stars: 45
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TimezZ
> With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy.
[](https://www.npmjs.com/package/timezz)
[](https://www.jsdelivr.com/package/npm/timezz)
## Features
- Typescript support
- Support all environments
- Easy customization
- Simple and lightweight
## Demo
[Demo](https://codesandbox.io/s/nervous-flower-v1fkb)
## Quick start
### Install
```shell
npm i timezz
```
#### CDN
For native ES Modules, there is also an ES Modules compatible build:
```html
import timezz from 'https://cdn.jsdelivr.net/npm/timezz@9.0.2/+esm';
```
### 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
```html
Years:
Days:
Hours:
Minutes:
Seconds:
```
### Initialization
#### ES6
TimezZ as an ES6 module.
```js
import timezz from 'timezz'
timezz(document.querySelector('.timer'), {
date: new Date(),
})
```
---
## Parameters
Full config with filled params:
```ts
timezz(document.querySelector('.timer'), {
date: new Date(),
pause: false,
stopOnZero: true,
beforeCreate() {},
beforeUpdate() {},
update(event) {},
})
```
### element
- type: `HTMLElement`
- required `true`
```ts
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`
```ts
// 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.
```ts
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.
```ts
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.
```ts
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.
```ts
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.
```ts
const timer = timezz(document.querySelector('.timer'), {
date: new Date(),
})
timer.update = (event) => {}
```
## API
### destroy
```ts
const timer = timezz(document.querySelector('.timer'), {
date: new Date(),
})
timer.destroy()
```
### init
After destroy you can init instance again.
```ts
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.
```ts
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.
```ts
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
},
})
```
## React
```tsx
import type { UpdateEvent } from 'timezz'
import { Timezz } from 'timezz/react'
export default function App() {
function onUpdate(event: UpdateEvent) {
console.log(event)
}
return (
Years:
Days:
Hours:
Minutes:
Seconds:
)
}
```
## Vue
```vue
import type { UpdateEvent } from 'timezz'
import { Timezz } from 'timezz/vue'
function onUpdate(event: UpdateEvent) {
console.log(event)
}
Years:
Days:
Hours:
Minutes:
Seconds:
```