7

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 3

13

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/

4
  • 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_9
    16/05/2016 às 15:20
  • @py_9 é isso que eu te ofereci :) Sabes adaptar o resto ou precisas de ajuda nos detalhes?
    – Sergio
    16/05/2016 às 15:56
  • precisava de ajuda nos detalhes se pudesses
    – py_9
    16/05/2016 às 16:03
  • 1
    @py_9 é isto que procuras? jsfiddle.net/34t7bcrb/1
    – Sergio
    16/05/2016 às 18:43
4

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.

FiddleJS com exemplo.

3
  • 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_9
    15/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.
    – pmargreff
    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_9
    16/05/2016 às 15:21
2

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);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .