Criar uma Contagem Regressiva em Javascript

Por | Atualizado em 2016-09-18

Neste tutorial iremos explicar como criar uma contagem regressiva em Javascript, que exibe no contador o tempo que falta (dias, horas, minutos e segundos) até uma determinada data definida por si.

Você poderá hospedar o código diretamente nas suas páginas, ou em alternativa criar uma página contendo o código completo e hospedar no Google Drive. Este será o resultado final:

Relembramos que poderá criar uma contagem regressiva recorrendo à linguagem Jquery. Para isso, basta usar a ferramenta gratuita FlipClock.js. Aqui fica um exemplo, com a contagem regressiva até ao final do ano:

Criar uma Contagem regressiva em Javascript

Em primeiro lugar, será necessário copiar a script que irá calcular o tempo necessário para chegar à data determinada por si:

<script>
var target_date = new Date("january 15, 2018").getTime();
var dias, horas, minutos, segundos;
var regressiva = document.getElementById("regressiva");

setInterval(function () {

    var current_date = new Date().getTime();
    var segundos_f = (target_date - current_date) / 1000;

dias = parseInt(segundos_f / 86400);
    segundos_f = segundos_f % 86400;
    
    horas = parseInt(segundos_f / 3600);
    segundos_f = segundos_f % 3600;
    
    minutos = parseInt(segundos_f / 60);
    segundos = parseInt(segundos_f % 60);

    document.getElementById('dia').innerHTML = dias;
document.getElementById('hora').innerHTML = horas;
document.getElementById('minuto').innerHTML = minutos;
document.getElementById('segundo').innerHTML = segundos;
  

}, 1000);
</script>

Agora, basta você alterar a data definida na primeira linha da script (no campo “New date”), adicionando a sua própria data “final”. O mês deverá ser adicionado em inglês (por exemplo: January, February, etc.).

Insira o seguinte código onde pretende exibir a contagem regressiva. Poderá ser diretamente no post, na barra lateral do blog / site, etc.

<div class="contagem">
<table><tr><td><div class="numero" id="dia"></div></td></td><td><div class="numero" id="hora"></div></td><td><div class="numero" id="minuto"></div></td><td><div class="numero" id="segundo"></div></td></tr>
<tr style="height:20px"><td><p class="legenda">Dias</p></td><td><p class="legenda">Horas</p></td><td><p class="legenda">Min</p></td><td><p class="legenda">Seg</p></td></tr></table>

</table>
</div>

A contagem regressiva já ficará ativa. Agora, é necessário aplicar os estilos CSS para adicionar as cores e tamanhos das fontes. Para isso, insira o seguinte código CSS na secção “<style>” das suas páginas.

.contagem{
width:300px;
height:70px;
background-color: #ffffff;
}

.numero
{
min-width: 20px;
max-width: 55px;
background-color: #efefef;
color: #000000;
font-size: 22px;
margin: 5px;
text-align: center;
border-radius: 5px;
padding: 5px;
}

.legenda{
height: 25px;
line-height: 10px;
font-size:12px;
background-color: #ffffff;
text-align: center;
}

Está pronto.

Um comentário em “Criar uma Contagem Regressiva em Javascript

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *