Código para um simples temporizador de contagem regressiva JavaScript?


147

Eu quero usar um cronômetro de contagem regressiva simples, iniciando em 30 segundos a partir de quando a função é executada e terminando em 0. Sem milissegundos. Como pode ser codificado?

Respostas:


255
var count=30;

var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     //counter ended, do something here
     return;
  }

  //Do code for showing the number of seconds here
}

Para fazer o código do timer aparecer em um parágrafo (ou em qualquer outro lugar da página), basta colocar a linha:

<span id="timer"></span>

onde você deseja que os segundos apareçam. Em seguida, insira a seguinte linha em sua timer()função, para que fique assim:

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}

Obrigado pela resposta. Estou tendo dificuldade em usá-lo porque meu cronômetro aparece em um parágrafo. Como posso colocar 30, 29, 28 etc. no meio de um parágrafo?
288 Mike

1
Eu editei a minha resposta para mostrar como exibir o cronômetro no parágrafo :)
Click Upvote

2
No meio de um parágrafo (horizontalmente): <p id = "timer" style = "text-align: center"> </ p>
Alsciende

Clique, seu cronômetro exibirá apenas "0 segundos". Você deve colocar a atualização innerHTML após a decrementação, não no caso final.
Alsciende

1
Oi, como posso parar o temporizador em execução no carregamento da página e apenas quando um botão é pressionado? Além disso, como posso redefinir o cronômetro quando um botão é pressionado após o cronômetro já estar esgotado?
crmepham

104

Eu escrevi este script há algum tempo:

Uso:

var myCounter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec){console.log(sec);}, // callback for each second
    onCounterEnd: function(){ alert('counter ended!');} // final action
});

myCounter.start();

function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {
      counterEnd();
      instance.stop();
    }
    seconds--;
  }

  this.start = function () {
    clearInterval(timer);
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };

  this.stop = function () {
    clearInterval(timer);
  };
}

1
Eu adoraria usar isso em vez dos outros. Quando eu estava preso para reiniciar o número inicial, vejo isso está funcionando muito bem ..
Oki Erie Rinaldi

Se eu precisar parar o cronômetro por acaso, como faço isso?
SIJ 14/07

@SIJ myCounter.stop();
R3tep 24/12/19

54

Até agora, as respostas parecem depender do código sendo executado instantaneamente. Se você definir um cronômetro para 1000ms, ele será em torno de 1008.

Aqui está como você deve fazê-lo:

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = time-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },100); // the smaller this number, the more accurate the timer will be
}

Para usar, ligue para:

timer(
    5000, // milliseconds
    function(timeleft) { // called every step to update the visible countdown
        document.getElementById('timer').innerHTML = timeleft+" second(s)";
    },
    function() { // what to do after
        alert("Timer complete!");
    }
);

2
Bem, como você disse, essa é a única maneira de fazê-lo corretamente!
Mcella # 23/14

3
Eu dei um joinha, com uma ressalva - para fins de exibição, você provavelmente quer mostrar o teto (Math.ceil ()) em vez do chão. É realmente desorientador quando o relógio chega a 0 um segundo antes do alerta disparar. (Então é claro que é preciso haver uma chamada adicional para update () antes completo ())
Paul Williams

21

Aqui está outro caso alguém precise de um por minutos e segundos:

    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    /* 
     * The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested. 
     * setTimeout('Decrement()',1000);
     */
    setTimeout(Decrement,1000); 

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    }

Você não deve passar uma string para o primeiro parâmetro de setTimeout, setTimeout(Decrement, 1000)é preferível. stackoverflow.com/questions/6232574/…
Scottux

Obrigado pela sugestão, eu atualizei o script.
Layton Everson

3

// Javascript Countdown
// Version 1.01 6/7/07 (1/20/2000)
// by TDavid at http://www.tdscripts.com/
var now = new Date();
var theevent = new Date("Sep 29 2007 00:00:01");
var seconds = (theevent - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID = window.setTimeout("update();", 1000);

function update() {
  now = new Date();
  seconds = (theevent - now) / 1000;
  seconds = Math.round(seconds);
  minutes = seconds / 60;
  minutes = Math.round(minutes);
  hours = minutes / 60;
  hours = Math.round(hours);
  days = hours / 24;
  days = Math.round(days);
  document.form1.days.value = days;
  document.form1.hours.value = hours;
  document.form1.minutes.value = minutes;
  document.form1.seconds.value = seconds;
  ID = window.setTimeout("update();", 1000);
}
<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
  <p>Days
    <input type="text" name="days" value="0" size="3">Hours
    <input type="text" name="hours" value="0" size="4">Minutes
    <input type="text" name="minutes" value="0" size="7">Seconds
    <input type="text" name="seconds" value="0" size="7">
  </p>
</form>


8
Esse script usa práticas muito ruins dos anos 90. E também 1,5 horas não é 2 horas. São 1 hora e 30 min. Você deve usar Math.floor, nãoMath.round
corbacho

3

Acabou de modificar a resposta de @ ClickUpvote :

Você pode usar IIFE (expressão de função chamada imediatamente) e recursão para facilitar um pouco:

var i = 5;  //set the countdown
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        console.log(i + ' secs');  //do stuff here
        timer();
    }, 1000);
})();


2

Expandir a resposta aceita, sua máquina entrando no modo de espera etc. pode atrasar o temporizador de funcionar. Você pode obter um tempo real, à custa de um pouco de processamento. Isso dará um tempo real restante.

<span id="timer"></span>

<script>
var now = new Date();
var timeup = now.setSeconds(now.getSeconds() + 30);
//var timeup = now.setHours(now.getHours() + 1);

var counter = setInterval(timer, 1000);

function timer() {
  now = new Date();
  count = Math.round((timeup - now)/1000);
  if (now > timeup) {
      window.location = "/logout"; //or somethin'
      clearInterval(counter);
      return;
  }
  var seconds = Math.floor((count%60));
  var minutes = Math.floor((count/60) % 60);
  document.getElementById("timer").innerHTML = minutes + ":" + seconds;
}
</script>

0

Você pode fazer o seguinte com JS puro. Você só precisa fornecer à função o número de segundos e ela fará o resto.

var insertZero = n => n < 10 ? "0"+n : ""+n,
   displayTime = n => n ? time.textContent = insertZero(~~(n/3600)%3600) + ":" +
                                             insertZero(~~(n/60)%60) + ":" +
                                             insertZero(n%60)
                        : time.textContent = "IGNITION..!",
 countDownFrom = n => (displayTime(n), setTimeout(_ => n ? sid = countDownFrom(--n)
                                                         : displayTime(n), 1000)),
           sid;
countDownFrom(3610);
setTimeout(_ => clearTimeout(sid),20005);
<div id="time"></div>


0

Com base na solução apresentada por @Layton Everson, desenvolvi um contador que inclui horas, minutos e segundos:

var initialSecs = 86400;
var currentSecs = initialSecs;

setTimeout(decrement,1000); 

function decrement() {
   var displayedSecs = currentSecs % 60;
   var displayedMin = Math.floor(currentSecs / 60) % 60;
   var displayedHrs = Math.floor(currentSecs / 60 /60);

    if(displayedMin <= 9) displayedMin = "0" + displayedMin;
    if(displayedSecs <= 9) displayedSecs = "0" + displayedSecs;
    currentSecs--;
    document.getElementById("timerText").innerHTML = displayedHrs + ":" + displayedMin + ":" + displayedSecs;
    if(currentSecs !== -1) setTimeout(decrement,1000);
}

0

// Javascript Countdown
// Version 1.01 6/7/07 (1/20/2000)
// by TDavid at http://www.tdscripts.com/
var now = new Date();
var theevent = new Date("Nov 13 2017 22:05:01");
var seconds = (theevent - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID = window.setTimeout("update();", 1000);

function update() {
  now = new Date();
  seconds = (theevent - now) / 1000;
  seconds = Math.round(seconds);
  minutes = seconds / 60;
  minutes = Math.round(minutes);
  hours = minutes / 60;
  hours = Math.round(hours);
  days = hours / 24;
  days = Math.round(days);
  document.form1.days.value = days;
  document.form1.hours.value = hours;
  document.form1.minutes.value = minutes;
  document.form1.seconds.value = seconds;
  ID = window.setTimeout("update();", 1000);
}
<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
  <p>Days
    <input type="text" name="days" value="0" size="3">Hours
    <input type="text" name="hours" value="0" size="4">Minutes
    <input type="text" name="minutes" value="0" size="7">Seconds
    <input type="text" name="seconds" value="0" size="7">
  </p>
</form>


0

Minha solução funciona com os formatos de data e hora do MySQL e fornece uma função de retorno de chamada. em conclusão. Isenção de responsabilidade: funciona apenas com minutos e segundos, pois era disso que eu precisava.

jQuery.fn.countDownTimer = function(futureDate, callback){
    if(!futureDate){
        throw 'Invalid date!';
    }

    var currentTs = +new Date();
    var futureDateTs = +new Date(futureDate);

    if(futureDateTs <= currentTs){
        throw 'Invalid date!';
    }


    var diff = Math.round((futureDateTs - currentTs) / 1000);
    var that = this;

    (function countdownLoop(){
        // Get hours/minutes from timestamp
        var m = Math.floor(diff % 3600 / 60);
        var s = Math.floor(diff % 3600 % 60);
        var text = zeroPad(m, 2) + ':' + zeroPad(s, 2);

        $(that).text(text);

        if(diff <= 0){
            typeof callback === 'function' ? callback.call(that) : void(0);
            return;
        }

        diff--;
        setTimeout(countdownLoop, 1000);
    })();

    function zeroPad(num, places) {
      var zero = places - num.toString().length + 1;
      return Array(+(zero > 0 && zero)).join("0") + num;
    }
}

// $('.heading').countDownTimer('2018-04-02 16:00:59', function(){ // on complete})

0

Por uma questão de desempenho, agora podemos usar com segurança requestAnimationFrame para loop rápido, em vez de setInterval / setTimeout.

Ao usar setInterval / setTimeout, se uma tarefa de loop estiver demorando mais que o intervalo, o navegador simplesmente estenderá o loop de intervalo, para continuar a renderização completa. Isso está criando problemas. Após minutos de sobrecarga setInterval / setTimeout, isso pode congelar a guia, o navegador ou o computador inteiro.

Os dispositivos de Internet têm uma ampla variedade de performances, por isso é impossível codificar um intervalo de tempo fixo em milissegundos!

Usando o objeto Data , para comparar a Data de início da época e a atual. Isso é muito mais rápido que tudo, o navegador cuida de tudo, a 60FPS ( 1000/60 = 16,66ms por quadro ) - um quarto de piscar de olhos - e se a tarefa no loop exigir mais do que isso , o navegador eliminará algumas repetições.

Isso permite uma margem diante dos nossos olhos ( Humano = 24FPS => 1000/24 ​​= 41.66ms por quadro = animação fluida!)

https://caniuse.com/#search=requestAnimationFrame

/* Seconds to (STRING)HH:MM:SS.MS ------------------------*/
/* This time format is compatible with FFMPEG ------------*/
function secToTimer(sec){
  const o = new Date(0), p =  new Date(sec * 1000)
  return new Date(p.getTime()-o.getTime()).toString().split(" ")[4] + "." + p.getMilliseconds()
}

/* Countdown loop ----------------------------------------*/
let job, origin = new Date().getTime()
const timer = () => {
  job = requestAnimationFrame(timer)
  OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(timer)

/* Stop looping ------------------------------------------*/
// cancelAnimationFrame(job)

/* Reset the start date ----------------------------------*/
// origin = new Date().getTime()
span {font-size:4rem}
<span id="OUT"></span>
<br>
<button onclick="origin = new Date().getTime()">RESET</button>
<button onclick="requestAnimationFrame(timer)">RESTART</button>
<button onclick="cancelAnimationFrame(job)">STOP</button>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.