Contagem regressiva

Matheus Zeuch — Thu, 19 Apr 2007 00:02:43 +0000

Hoje vamos aprender a fazer um contador regressivo simples para uma data e hora futura. Nosso contador deve mostrar o resultado em um formato texto, numa tag span, para que seu estilo possa ser configurado. O resultado é interessante.

O código abaixo é a parte principal do nosso contador. Observe que utilizei variáveis para setar qual a data e hora futura. A vantagem disso é que essas variáveis podem ser atualizadas por uma outra função javascript, fazendo com que o nosso contador possa ser atualizado em tempo real (veremos isso em funcionamento no exemplo prático).

var YY = 2007;
var MM = 12;
var DD = 31;
var HH = 23;
var MI = 59;
var SS = 59; 

function atualizaContador() {
  var hoje = new Date();
  var futuro = new Date(YY,MM-1,DD,HH,MI,SS); 

  var ss = parseInt((futuro - hoje) / 1000);
  var mm = parseInt(ss / 60);
  var hh = parseInt(mm / 60);
  var dd = parseInt(hh / 24); 

  ss = ss - (mm * 60);
  mm = mm - (hh * 60);
  hh = hh - (dd * 24); 

  var faltam = '';
  faltam += (dd && dd > 1) ? dd+' dias, ' : (dd==1 ? '1 dia, ' : '');
  faltam += (toString(hh).length) ? hh+' hr, ' : '';
  faltam += (toString(mm).length) ? mm+' min e ' : '';
  faltam += ss+' seg'; 

  if (dd+hh+mm+ss > 0) {
    document.getElementById('contador').innerHTML = faltam;
    setTimeout(atualizaContador,1000);
  } else {
    document.getElementById('contador').innerHTML = 'CHEGOU!!!!';
    setTimeout(atualizaContador,1000);
  }
}

A função atualizaContador() foi escrita de maneira que possa ser alterada facilmente. Você pode, por exemplo, alterar o código para que retorne o contador em vez de exibí-lo.

Abaixo está o código html que utilizei para demonstrar o funcionamento. Fiz com que o evento onchange dos campos atualizem as variáveis da data futura.


 /
 /
 às
 :
 :



Faltam

Você pode ver um exemplo em funcionamento deste código aqui. Ou se preferir, pode baixar o código para estudar melhor.

Exemplo | Download

Até a próxima!

GUJS - Grupo de Usuários Javascript » Tutoriais Intermediários

Contagem regressiva