GUJS

O Maior Fórum Javascript do Brasil

Contagem regressiva

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.

<body onload="atualizaContador()">
<input size="1" onchange="DD=this.value" style="text-align: center" /> /
<input size="1" onchange="MM=this.value" style="text-align: center" /> /
<input size="4" onchange="YY=this.value" style="text-align: center" /> às
<input size="1" onchange="HH=this.value" style="text-align: center" /> :
<input size="1" onchange="MI=this.value" style="text-align: center" /> :
<input size="1" onchange="SS=this.value" style="text-align: center" />
<br />
Faltam <span id="contador"></span>
</body>

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!

17 Comentários para “Contagem regressiva”

  1. Luis Eduardo Bohrer Says:

    Cara;

    Muito legal mesmo este seu post, parabéns.

    Até mais.

  2. Paulo Neto Says:

    Poxa! gostei mesmo!
    estou sempre por aq para mais novidades.
    ate mais!

  3. Joao Says:

    Muito bom! Parabéns amigo e um 2008 cheio de realizações e muita saúde.
    JHPessoa

  4. Neidson Says:

    Prezados senhores;
    Site muito interessante para agente colocar na nossa HOme Page, mas acontece que não consigo fazer o dounload. aparece como erro.
    Como fazer?
    quais as opções amais?
    Neidson

  5. Matheus Zeuch Says:

    Pessoal, desculpem pelo descuido. O link de download realmente não estava funcionando. Agora o problema foi corrigido. Fiquem à vontade para baixar o exemplo.
    Abração e muito obrigado pelas pessoas que nos avisaram do erro ;-)

  6. Anjopeca Says:

    Prezados Senhores

    Muito bom esta contagem regressiva.~

    Agradecia no entanto, se possivel, como se poderia colocar duas ou tres contagens em que fosse assinalado em todos eles o tempo restante que falta.

    Pois, ao colocar mais de uma contagem, as restantes não trabalham bem.

    Pode-se ver em meu blog o que se está a passar.

    Obrigado

    Anjopeca

  7. Matheus Zeuch Says:

    Olá Anjopeca, fiz um teste aqui e funcionou perfeitamente atualizar o contador em dois ou mais lugares ao mesmo tempo. Na verdade eu simplesmente mandei atualizar em outro lugar no final do código, assim:

    document.getElementById(’contador’).innerHTML = faltam;
    document.getElementById(’contador2′).innerHTML = faltam;

    Lembre-se que não pode ter duas tags com o mesmo ID, então se no primeiro contador você utilizou o ID “contador”, no segundo tem que ser diferente, tipo “contador2″. E isso tem que ter atualizado na função “atualizaContador() ” também. Era isso que você queria?

  8. Rafael Says:

    Você plagiou isso do site html staff e nem colocou ai o mesmo como fonte de pesquisa, que vergonha ein…

  9. Matheus Zeuch Says:

    Olá Rafael, faz quase um ano que escrevi isto, e não me recordo de todas as fontes de onde baseei meu código, só tenho certeza que mudei bastante. De qualquer maneira, se foi do HTML Staff, me desculpe e fique à vontade para postar aqui o link, para que possamos corrigir este erro e dar os devidos créditos à quem escreveu a primeira versão deste código.

  10. anjopeca Says:

    Com surpresa minha fui informado que retirei os vossos códigos conta regressiva, em http://gujs.com.br/blog/2007/04/contagem-regressiva/.

    Não entendo, e pergunto:

    - Não está no mesmo local a ensinar tais códigos?
    - Está indicado que não se pode aprender/ copiar?
    - Está indicado que depois de aprender, tem-se que informar o local onde se aprendeu?

    Mais ainda informo, que foi solicitado esclarecimento do funcionamento dos códigos, conforme está descrito nos comentários, como se pode ver.

    Agradeço que fosse informado o que houver por interesse.

    Atentamente
    anjopeca

    (copia do email ( resposta) enviado a GUJS [matheuszeuch@gmail.com]

  11. Rafael Says:

    Olá Matheus, está exatamente igual, olhá só, fiquei até com vergonha de falar isso pra você pois poderia ter sido muito bem você o autor no HTML Staff, tá ai o link:
    http://www.htmlstaff.org/ver.php?id=7920

  12. anjopeca Says:

    E eu levei por tabela porque ?

    Porquê o meu cadastro foi bloqueado?!!

    Parece-me que não é justo.

    ???!!!!

  13. Matheus Zeuch Says:

    Rafael, se você olhar bem, verás que o artigo do HTML Staff foi publicado DEPOIS do meu, e inclusive o GUJS está sendo referenciado no início daquele artigo. Na verdade, é uma pena que o meu artigo tenha sido reproduzido na íntegra por aquele site, sem nenhum acréssimo de conhecimento, isso sim é que não se deveria fazer.
    Por favor, tome mais cuidado ao acusar as pessoas de forma agressiva sem antes ter absoluta certeza do que estás dizendo.
    Um abraço e bons estudos.

  14. Matheus Zeuch Says:

    Anjopeca, desculpe, mas não sei do quê exatamente você está falando. Seu cadastro foi bloqueado de onde? Por favor, vamos conversar por email para resolver isso, pois não me parece um assunto relativo à este artigo.
    Um abraço

  15. Rafael Says:

    Por isso que eu falei que até fiquei com vergonha de postar aquilo que alguém poderia ter plágiado você, pois o artigo é muito igual.
    []’s e me desculpe o mal entendido, meu comment não foi agrecivo apesar de parecer, foi apenas um alerta de quem poderia estar plagiando alguém, coisas de auditor esquece.
    Parabéns pelo belíssimo artigo.

  16. Rafael Says:

    Ah uma pergunta interessante, e se o desenvolvedor quiser apenas a contagem regressiva de horas, minutos e segundos, seria fácil adaptar esse seu script??? Tentei e não consegui, talvez você possa explicar pra gente melhor, pelo que andei pesquisando tem muita gente não conseguindo fazer isso.

  17. bopzuth ukprfanwh Says:

    debj adeiush upcrdtkx cstarlzw xfkibvr kguafthz vulf

Comentários

©2008 GUJS. Todos os direitos reservados.