Leandro Garcia

Contagem regressiva em Javascript

Tempos atrás, no decorrer do desenvolvimento de um sistema web, o cliente solicitou que houvesse um contador regressivo de quanto tempo faltava para que o sistema efetuasse determinada ação.

Depois de quebrar a cabeça cheguei até o script abaixo

function atualizaContador(YY,MM,DD,HH,MI,saida) {
var SS = 00; //Segundos
var hoje = new Date(); //Dia
var futuro = new Date(YY,MM-1,DD,HH,MI,SS); //Data limite do contador

var ss = parseInt((futuro - hoje) / 1000); //Determina a quantidade total de segundos que faltam
var mm = parseInt(ss / 60); //Determina a quantidade total de minutos que faltam
var hh = parseInt(mm / 60); //Determina a quantidade total de horas que faltam
var dd = parseInt(hh / 24); //Determina a quantidade total de dias que faltam

ss = ss - (mm * 60); //Determina a quantidade de segundos
mm = mm - (hh * 60); //Determina a quantidade de minutos
hh = hh - (dd * 24); //Determina a quantidade de horas

//O bloco abaixo descreve monta o que vai ser escrito na tela
var faltam = '';
faltam += (dd && dd > 1) ? dd+' dias, ' : (dd==1 ? '1 dia, ' : '');
faltam += (toString(hh).length) ? hh+':' : '';
faltam += (toString(mm).length) ? mm+':' : '';
faltam += ss;

if (dd+hh+mm+ss > 0) {
document.getElementById(saida).innerHTML = faltam;//INsere o conteudo da variável faltam na página.
setTimeout(function(){atualizaContador(YY,MM,DD,HH,MI,saida)},1000);//Reinicia a função a cada um segundo
} else {
document.getElementById(saida).innerHTML = '';
setTimeout(function(){atualizaContador(YY,MM,DD,HH,MI,saida)},1000);
}
}

Agora para chamar na sua página, pode-se chamar de duas maneiras:

<body onload="atualizaContador('2009','07','14','23','00','00','elementodedestino')">

<script type="text/javascript">window.onload=function(){
atualizaContador('2009','07','14','23','00','00','elementodedestino');
}</script>

Eu prefiro utiliza a maneira acima utilizando o window.onload, pois acredito que torna a página mais arrumada e, ainda, podemos colocar no final da página, melhorando o carregamento da página.

Espero que seja util para vocês.

link

Download

11 Comentários »

Comentário por Gustavo — 03/11/2009 @ 9:57 am

Gárcia, muito bom o seu código, estou conseguindo utilizar perfeitamente, só um porém, queria que quando os segundos, minutos e horas fosse menor que 10, ele continuasse com duas casas decimais, ex: 09 e não 9. Teria como? Abraço.
Comentário por Mauricio Miyakawa — 15/07/2011 @ 4:18 pm

Olá Gustavo, troque a parte do código por essa:

var faltam = ”;
faltam += (dd && dd > 1) ? dd+’ dias, ‘ : (dd==1 ? ’1 dia, ‘ : ”);
faltam += (toString(hh).length) ? (hh<10 ? '0'+hh+':' : hh+':') : '';
faltam += (toString(mm).length) ? (mm<10 ? '0'+mm+':' : mm+':') : '';
faltam += (ss<10 ? '0'+ss : ss);
Comentário por Hamilton — 17/08/2011 @ 11:28 am

Olá, preciso colocar varios contadores na mesma pagina, deu certinho o primeiro, mas quando coloco os outros, os primeiros travam e so funciona o ultimo. Vc poderia me dar umadica de quais variaveis eu preciso trocar o nome para que funcione varios scripts ao mesmo tempo? obrigado.
Comentário por Cadu — 13/09/2011 @ 4:22 am

Valeu cara… Obrigadão, era isso que eu estava precisando… abraços.
Comentário por Guilherme — 21/09/2011 @ 9:54 am

Parabéns! Muito bom o código.
Comentário por River Cruz — 08/10/2011 @ 1:29 pm

Muito bom o código vc esta de Parabéns!
Mais gostaria de saber se tem como fazer um aparecer uma mensagem depois que acaba o tempo igual ao website do legendarei os
Comentário por leandro garcia — 11/10/2011 @ 1:06 pm

É possível, ams não nesta versão do código. Teria que ser alterado o código.
Comentário por Diego — 19/12/2011 @ 10:43 pm

Como faça para exibir apenas a hoa:minuos:segundos?
Comentário por Fábio — 26/12/2011 @ 11:15 am

Valeu Leandro, obrigado por disponibilizar o código.
Comentário por leandro garcia — 02/01/2012 @ 3:34 pm

Você tem que alterar o código de:

var faltam = ”;
faltam += (dd && dd > 1) ? dd+’ dias, ‘ : (dd==1 ? ’1 dia, ‘ : ”);
faltam += (toString(hh).length) ? hh+’:’ : ”;
faltam += (toString(mm).length) ? mm+’:’ : ”;
faltam += ss;

Para:
var faltam = ”;
faltam += (toString(hh).length) ? hh+’:’ : ”;
faltam += (toString(mm).length) ? mm+’:’ : ”;
faltam += ss;
Comentário por arlindo vieira — 03/01/2012 @ 7:03 pm

Cara Leandro muito obrigado!!!!!!! resolveu o meu problema estou procurando esse código desde a semana passada!