Como fazer um contador em JavaScript/jQuery onde ele seja nesse formato 00:00 e que ele pare e execute uma ação for parado, mas o seu limite é de 10 minutos, só pode ficar de 0s até 10 minutos, quando chegar nos 10 minutos ele automaticamente para e executa ação mesmo nao tendo sido parado manualmente...
2 Respostas
Pus-me a brincar com a ideia e cheguei a um cronometro assim:
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();
}
jsFiddle: http://jsfiddle.net/1f32wtsm/
É um objeto reciclável que tem alguns métodos para as funcionalidades que ele precisa. Escreví em PT por isso acho que a maior parte se auto-explica.
Podes passar elementos para as funcionalidades de mostrar/parar/começar, se não ele tem valores default que vai procurar por classes.
A parte que pode precisar de explicação é:
this.contar = function () {
var self = this;
this.contador = setInterval(function () {
self.mostrar.call(self, self.tempo++);
}, 1000);
}
O setInterval
vai correr no escopo global. Isso quer dizer que se usar this
dentro dessa função ele vai apontar para o window
. Então usei var self = this;
para guardar a referência do meu objeto e uso self.mostrar.call(self
para chamar this.mostrar()
com o this
certo.
Fazendo assim, reciclável, posso ter vários contadores ao mesmo tempo.
-
2Ora, você gosta de brincar com o que projeta, também sou assim!, Funcionou em perfeita harmonia, gostei muito pois a forma com que voce montou a função fez com que ela ficasse maleável e fácil de manipular, ficou ótimo, fiz adaptações ótimas, Muito obrigada por acrescentar meu conhecimento e me ajudar =D– ElaineCommented 14/07/2015 às 16:15
-
Fiz uma pequena função que você pode controlar o tempo. (O JQuery não é necessário para o funcionamento do script, só usei para manipular o textbox e os buttons).
var Clock = {
minutosStop: 10, //pode "setar"o tempo usando "Clock.minutosStop = 5" para 5 min
totalSegundos: 0,
start: function() {
var self = this;
this.interval = setInterval(function() {
self.totalSegundos += 1;
self.min = Math.floor(self.totalSegundos / 60 % 60);
self.seg = parseInt(self.totalSegundos % 60);
if (typeof self.onChange === 'function')
self.onChange();
if (self.min == self.minutosStop)
self.fire();
}, 1000, self);
return this;
},
toString : function() {
return String("00" + this.min).slice(-2) + ":" + String("00" + this.seg).slice(-2);
},
onChange: null,
funcaoFire: null,
pause: function() {
clearInterval(this.interval);
delete this.interval;
return this;
},
resume: function() {
if (!this.interval) this.start();
return this;
},
fire: function() {
if (typeof this.funcaoFire === 'function')
this.funcaoFire();
this.pause();
this.totalSegundos = 0;
return this;
}
};
Clock.start();
Clock.funcaoFire = function() {
alert(Clock.toString());
}
Clock.onChange = function() {
$("#contador").val(Clock.toString());
}
$('#pauseButton').click(function() {
Clock.pause();
});
$('#resumeButton').click(function() {
Clock.resume();
});
$('#fireButton').click(function() {
Clock.fire();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="contador" value="00:00" />
</div>
<div>
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
<input id="fireButton" type="button" value="Fire">
</div>
-
1Ótimo código! Muito boa a forma que voce aplica os métodos de execução, super formidável, obrigada!– ElaineCommented 14/07/2015 às 16:16