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.
Até a próxima!
abril 18th, 2007 at 21:24
Cara;
Muito legal mesmo este seu post, parabéns.
Até mais.
outubro 7th, 2007 at 10:39
Poxa! gostei mesmo!
estou sempre por aq para mais novidades.
ate mais!
dezembro 30th, 2007 at 23:41
Muito bom! Parabéns amigo e um 2008 cheio de realizações e muita saúde.
JHPessoa
fevereiro 8th, 2008 at 17:29
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
fevereiro 11th, 2008 at 09:35
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 ;-)
fevereiro 26th, 2008 at 06:14
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
fevereiro 26th, 2008 at 08:59
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?
março 24th, 2008 at 14:04
Você plagiou isso do site html staff e nem colocou ai o mesmo como fonte de pesquisa, que vergonha ein…
março 24th, 2008 at 14:32
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.
março 24th, 2008 at 15:02
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]
março 24th, 2008 at 16:03
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
março 24th, 2008 at 16:15
E eu levei por tabela porque ?
Porquê o meu cadastro foi bloqueado?!!
Parece-me que não é justo.
???!!!!
março 24th, 2008 at 16:18
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.
março 24th, 2008 at 16:20
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
março 26th, 2008 at 17:21
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.
março 26th, 2008 at 17:24
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.
maio 26th, 2009 at 15:30
bacana mesmo cara.
tentei sem sucesso fazer o google entender minha subtração de datas mas nao teve jeito :)
junho 10th, 2009 at 13:06
Vlw
muito util e pratico.