JSFiddle - React, Tailwind, and code Playground
HTML
<div class="a"></div>
<button type="button" class="b">Iniciar</button>
<button type="button" class="c">Pausar</button>
JavaScript
var Cronometro = function (opcoes) {
this.opcoes = opcoes || {};
this.contador = null;
this.tempo = 0;
this.configurar = function () {
this.mostrador = this.opcoes.mostrador || document.querySelector('.mostrador');
this.iniciar = this.opcoes.iniciar || document.querySelector('.iniciar');
this.pausar = this.opcoes.pausar || document.querySelector('.pausar');
this.iniciar.addEventListener('click', this.contar.bind(this));
this.pausar.addEventListener('click', this.parar.bind(this));
this.accao = this.opcoes.callback || function () {
alert('chegou aos dez minutos!');
}
}
this.contar = function () {
var self = this;
this.contador = setInterval(function () {
self.mostrar.call(self, self.tempo++);
}, 1000);
}
this.parar = function () {
clearInterval(this.contador);
this.contador = null;
}
this.formatarNumeros = function (nr) {
var str = nr + '';
return str.length < 2 ? '0' + str : str;
}
this.mostrar = function (tempo) {
var minutos = Math.floor(tempo / 60);
var segundos = tempo % 60;
this.mostrador.innerHTML = [minutos, segundos].map(this.formatarNumeros).join(':');
if (tempo == 36000) {
this.parar();
this.tempo = 0;
this.accao();
this.contar();
}
}
this.configurar();
this.contar();
}
// usando elementos que não os default
var mostrador = document.querySelector('.a');
var iniciar = document.querySelector('.b');
var pausar = document.querySelector('.c');
new Cronometro({
mostrador: mostrador,
iniciar: iniciar,
pausar: pausar
});