Você pode instalar a biblioteca em seu projeto duas diferentes formas.
1. CDN
A função construtura CountDown estará disponível no escopo global.
// CSS
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@danielpiva/countdown.js/dist/index.css">
</head>
// JavaScript
<script src="https://unpkg.com/@danielpiva/countdown.js/dist/index.js"></script>2. Webpack/Parcel
npm i @danielpiva/countdown.js --save
### ou
yarn add @danielpiva/countdown.jsimport CountDown from '@danielpiva/count-down.js/dist';
import '@danielpiva/countdown.js/dist/index.css';
// ou
const CountDown = require('@danielpiva/count-down.js/dist').default;
require('@danielpiva/countdown.js/dist/index.css');Para instanciar um CountDown, passe uma refêrencia de um elemento DOM ou apenas um seletor, como no snippet abaixo.
É importante ressaltar que para a palavra new antes da chamada é obrigatória, caso contrário você irá obter um erro de runtime.
O count down será inicializado e renderizado somente após a chamada do método start;
É necessário que a data passada para o count down seja maior do que a data atual, nem que um milisegundo, caso contrário você irá obter um erro.
<html lang="pt-BR">
<head>
</head>
<body>
<div id="meu-count-down"></div>
</body>
</html>const meuCountDown = new CountDown('#meu-count-down', {
until: new Date(2020, 1, 1)
});
meuCountDown.start();const countDown = new CountDown('#meu-count-down', {
until: new Date(2020, 1, 1),
// ou
date: new Date(2020, 1, 1),
locale: {
days: 'Dias',
hours: 'Hours',
minutes: 'Minutos',
seconds: 'Seconds'
}
});
// Você pode passar a data pelo método start também
countDown.start(new Date(2020, 1, 1));const countDown = new CountDown('#meu-count-down', {
until: new Date(2020)
});
countDown.start();
countDown.pause();
countDown.resume();
countDown.destroy();Lembre-se de registrar os handlers antes de chamar o método start, caso contrário você poderá perder os eventos.
const countDown = new CountDown('#meu-count-down');
// Escutando a eventos
countDown.on('start', console.log);
countDown.on('pause', console.log);
countDown.on('resume', console.log);
countDown.on('render', console.log);
countDown.on('destroy', console.log);
countDown.on('end', console.log);
// Removendo handlers de eventos
countDown.off('start', console.log);
countDown.off('pause', console.log);
countDown.off('resume', console.log);
countDown.off('render', console.log);
countDown.off('destroy', console.log);
countDown.off('end', console.log);
countDown.start(new Date(2020, 1, 1));| Nome | Descrição | Parâmetros | Retorno |
|---|---|---|---|
| start | Inicializa o timer e dispara a primeira renderização. | date: Date |
- |
| pause | Pausa o Count Down. | - | - |
| resume | Dá play no Count Down, caso esteja pausado. | - | - |
| on | Registra handler passado para um evento. |
event: Stringhandler: Function |
handler: Function |
| off | Retira o handler de um evento, caso a referência passada seja encontrada na lista de handlers, caso contrário retira todos. |
event: Stringhandler: Function |
- |
| destroy | Destrói o Count Down. Retira todos os elementos criados do DOM. |
- | - |
| forceUpdate | Força um update e re-render no Count Down. | - | - |
| Nome | Descrição | Argumentos |
|---|---|---|
| start | Inicializa o timer e dispara a primeira renderização. | date |
| pause | Pausa o Count Down. | - |
| resume | Dá play no Count Down, caso esteja pausado. | - |
| destroy | Destrói o Count Down. Retira todos os elementos criados do DOM. |
- |
| end | Força um update e re-render no Count Down. | - |