Leandro Garcia » contador http://www.leandrogarcia.com Wed, 11 Jan 2012 13:31:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Contagem regressiva em Javascript http://www.leandrogarcia.com/blog/contagem-regressiva-em-javascript/ http://www.leandrogarcia.com/blog/contagem-regressiva-em-javascript/#comments Tue, 14 Jul 2009 21:06:01 +0000 leandro garcia http://www.leandrogarcia.com/blog/?p=83 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.

link

Download

]]> http://www.leandrogarcia.com/blog/contagem-regressiva-em-javascript/feed/ 11