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')">
OU
<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.
Enviado por: Leandro Garcia - Categoria(s): JavaScript Tags relacionadas: contador, JavaScript
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.