O mais simples possível temporizador de contagem regressiva JavaScript? [fechadas]

240

Só queria perguntar como criar o contador de contagem regressiva mais simples possível.

Haverá uma frase no site dizendo:

"O registro é encerrado em 05:00 minutos!"

Então, o que eu quero fazer é criar um contador js simples que vá de "05:00" a "00:00" e, em seguida, redefina para "05:00" assim que terminar.

Eu estava passando por algumas respostas antes, mas todas elas parecem muito intensas (objetos Date, etc.) para o que eu quero fazer.

javascript timer countdown countdowntimer Bartek
fonte
4
E, novamente, você está deixando de fora o HTML relevante, embora pelo menos tenha explicado o problema da complexidade dessa vez. Mas, falando sério, você precisa procurar por uma solução e depois nos perguntar sobre os problemas que está enfrentando.
David diz que restabelece Monica
Exemplos de código com reclamações sobre como eles são muito complicados? Enfim, acho que você poderia facilmente setIntervaltorná-lo .inner baseado em HTML, em vez de baseado em data.
bjb568
1
Sim, as pessoas devem procurar fazer a solução sozinhas. Mas com o javaScript, existem muitos exemplos de tarefas comuns. Sei como fazer uma contagem regressiva, mas prefiro encontrar uma na Web (como um componente). Então, graças a esta pergunta e à extensa resposta, encontrei o que estava procurando. Lógica de contagem regressiva
Carlos Rafael Ramirez
2
Achei essas soluções mais simples: stackoverflow.com/questions/32141035/…
nu everest
Veja isto: sitepoint.com/build-javascript-countdown-timer-no-dependencies
Erich García

Respostas:

490

Eu tenho duas demos, uma com jQuerye outra sem. Não use funções de data e são tão simples quanto ele ganha.

Demonstração com baunilha JavaScript

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
<body>
    <div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>
Expandir snippet

Demonstração com jQuery 

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

jQuery(function ($) {
    var fiveMinutes = 60 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});

No entanto, se você deseja um cronômetro mais preciso, é apenas um pouco mais complicado:

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // does the same job as parseInt truncates the float
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds; 

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 05:00 not 04:59
            start = Date.now() + 1000;
        }
    };
    // we don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>
Expandir snippet

Agora que criamos alguns cronômetros bastante simples, podemos começar a pensar em reutilização e separar preocupações. Podemos fazer isso perguntando "o que uma contagem regressiva deve fazer?"

  • Uma contagem regressiva deve contagem regressiva? sim
  • Uma contagem regressiva deve saber como se exibir no DOM? Não
  • Uma contagem regressiva deve reiniciar a si mesma quando atingir 0? Não
  • Uma contagem regressiva deve fornecer uma maneira de um cliente acessar quanto tempo resta? sim

Então, com essas coisas em mente, vamos escrever uma melhor (mas ainda assim muito simples) CountDownTimer

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};

Então, por que essa implementação é melhor que as outras? Aqui estão alguns exemplos do que você pode fazer com isso. Observe que todos, exceto o primeiro exemplo, não podem ser alcançados pelas startTimerfunções.

Um exemplo que exibe a hora no formato XX: XX e reinicia após atingir 00:00

Um exemplo que exibe a hora em dois formatos diferentes

Um exemplo que possui dois cronômetros diferentes e apenas um reinicia

Um exemplo que inicia o contador decrescente quando um botão é pressionado

robbmj
fonte
2
Você é o cara! Era exatamente o que eu estava procurando. Obrigado! Mais uma coisa: como posso adicionar "0" na frente de minutos, para mostrar "04:59" em vez de "4:59"?
Bartek
1
minutes = minutes < 10 ? "0" + minutes : minutes;
robbmj
8
@ timbram também me pareceu estranho no começo, até que percebi que uma vírgula após uma vardeclaração separa diferentes declarações. por isso minutese secondssão simplesmente declarou (mas não inicializada) variáveis. então timeré simplesmente igual ao durationparâmetro, nada mais, nada menos.
abustamam
2
@ SinanErdem Eu escrevi algum código que faz isso. Posso adicionar esse código à resposta ainda hoje. Vou fazer ping quando você terminar.
robbmj
3
Como você adiciona opções de redefinição? E também uma pausa e currículo? Tentei adicionar um campo this.reset e verifique isso no fechamento. Mas o relógio continua indo embora.
Dzung Nguyen
24

Se você quiser um cronômetro real, precisará usar o objeto de data.

Calcule a diferença.

Formate sua string.

window.onload=function(){
      var start=Date.now(),r=document.getElementById('r');
      (function f(){
      var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
      r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
      if(diff>3e5){
         start=Date.now()
      }
      setTimeout(f,1e3);
      })();
}

Exemplo

Jsfiddle

temporizador não tão preciso

var time=5*60,r=document.getElementById('r'),tmp=time;

setInterval(function(){
    var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
    r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
    tmp!=0||(tmp=time);
},1000);

JsFiddle

cocco
fonte
16

Você pode criar facilmente uma funcionalidade de timer usando setInterval.Below é o código que você pode usá-lo para criar o timer.

http://jsfiddle.net/ayyadurai/GXzhZ/1/

window.onload = function() {
  var minute = 5;
  var sec = 60;
  setInterval(function() {
    document.getElementById("timer").innerHTML = minute + " : " + sec;
    sec--;
    if (sec == 00) {
      minute --;
      sec = 60;
      if (minute == 0) {
        minute = 5;
      }
    }
  }, 1000);
}
Registration closes in <span id="timer">05:00<span> minutes!
Expandir snippet

Durai
fonte
3
Não representa com precisão cada segundo, está em contagem regressiva muito rápida.
21417 Scott Schaffner
4
Alterar os 500 para 1000 parece torná-lo preciso.
Scott Rowley
Solução, a hora deve ser alterada para minutos, para evitar confusão
embulldogs99