Preciso de ajuda para fazer um timer para uma página, e tem de ser diferente para cada dificuldade de um jogo, por exemplo, para o modo fácil tem 1 minuto, para o intermédio tem 4 minutos, e para o difícil 8 minutos.
3 Respostas
Podes fazer um objeto Timer
e depois criares instâncias novas cada vez que precises. Por exemplo:
var button = document.querySelector('button');
var mostrador = document.querySelector('#mostrador');
button.addEventListener('click', function() {
new Timer(1, mostrador, function() {
alert('O tempo acabou!');
}).start();
});
function Timer(mins, target, cb) {
this.counter = mins * 60;
this.target = target;
this.callback = cb;
}
Timer.prototype.pad = function(s) {
return (s < 10) ? '0' + s : s;
}
Timer.prototype.start = function(s) {
this.count();
}
Timer.prototype.stop = function(s) {
this.count();
}
Timer.prototype.done = function(s) {
if (this.callback) this.callback();
}
Timer.prototype.display = function(s) {
this.target.innerHTML = this.pad(s);
}
Timer.prototype.count = function(s) {
var self = this;
self.display.call(self, self.counter);
self.counter--;
var clock = setInterval(function() {
self.display(self.counter);
self.counter--;
if (self.counter < 0) {
clearInterval(clock);
self.done.call(self);
}
}, 1000);
}
<div id="mostrador"></div>
<button>1 minuto</button>
jsFiddle: https://jsfiddle.net/34t7bcrb/
-
eu queria um timer que ao carregar no botão jogar do jogo começasse a fazer a contagem decrescente apartir dos 8 minutos por exemplo. E que aparecesse na página esse mesmo timer como se fosse um cronómetro– py_916/05/2016 às 15:20
-
@py_9 é isso que eu te ofereci :) Sabes adaptar o resto ou precisas de ajuda nos detalhes?– Sergio16/05/2016 às 15:56
-
-
1
Você pode usar a função setInterval
setInterval(function(){
alert("Olá");
}, 2000);
Entre as chaves coloque a ação que você deseja executar (um alert no exemplo). e depois da chave de fechamento especifique o tempo em milisegundos e a cada vez que essa contagem é completa (2 segundos no exemplo) ele chama a ação desejada.
-
Obrigada, e como é que faço para mostrar o timer na página para realmente se ver o timer a fazer o countdown @pmargreff– py_915/05/2016 às 11:55
-
Ele está fazendo a contagem, o que você pode fazer caso queira exibir na tela é atualizar outra variável de segundo em segundo usando a mesma função e a exibir. Pode até mesmo fazer uma outra variável que atualiza de segundo em segundo e colocar um contador dentro da sua função para atualizar somente até o segundo desejado. Acho que essa solução é melhor pois o ajudaria com o objetivo da pergunta e também como esse do comentário. 15/05/2016 às 11:57
-
eu queria um timer que ao carregar no botão jogar do jogo começasse a fazer a contagem decrescente apartir dos 8 minutos por exemplo. E que aparecesse na página esse mesmo timer como se fosse um cronómetro– py_916/05/2016 às 15:21
Duas opções simples (2000 ms):
requestAnimationFrame
[requestAnimationFrame] tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
window.requestAnimationFrame(loop);
var timer_RAF = performance.now();
function loop (){
passed = performance.now() - timer_RAF;
if(passed >= 2000){
console.log('requestAnimationFrame', passed);
timer_RAF= performance.now();
// seu codigo a ser executado a cada 2000ms
}
window.requestAnimationFrame(loop);
}
setInterval
var timer_interval = performance.now();
setInterval(function(){
console.log('setInterval', performance.now() - timer_interval);
timer_interval = performance.now();
// seu codigo a ser executado a cada 2000ms
}, 2000);