Como adicionar uma contagem regressiva em seu site

Contagem regressiva

As contagens regressivas são muito utilizadas hoje em dia quando se trata de divulgar um produto em um determinado período de tempo. Elas também servem para determinar quando algo será lançado ou expirado. Se você está procurando formas atuais de como adicionar um contador regressivo no seu site, é por aqui mesmo que vamos te ensinar.

Antes de tudo, vamos te explicar como funciona. Veja bem…

Aqui abaixo você pode ver o código final do widget que será colado no seu site:

<center><div style="color:#000000; font-size: 85px; font-weight: normal" id="dday"></div></center>

<script>
// Set the date we're counting down to
var countDownDate = new Date("April 25, 2019 12:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("dday").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("dday").innerHTML = "SITE NA TEIA";
  }
}, 1000);
</script>

Pois bem, algumas partes desse código podem ser personalizado por você, alterando o tamanho do texto, cor e a própria contagem. A primeira linha do código já nos entrega praticamente quase tudo o que precisamos para alterar. Observe  abaixo:

<center><div style="color:#000000; font-size: 85px; font-weight: normal" id="dday"></div></center>

Neste trecho de código você pode substituir o que está mencionado em negrito. Em “color: #000000;”, você deve trocar por uma cor de sua preferência. Aqui neste link tem uma tabela completa pra você escolher e personalizar.

Continua depois da publicidade
 

Em “fonte-size: 85px;”, você pode alterar o tamanho da fonte. Para isso basta apenas trocar o número 85.

Em “font-weight: normal”, você pode alterar o tipo da fonte. Essa opção não funciona com qualquer tipo de fonte, por isso é recomendável deixar em normal. Se ainda quiser trocar, basta apenas substituir “normal” pelo nome da fonte desejada.

Veja também

Alterando a data e hora da contagem

Agora vamos alterar a data e hora de quando a contagem irá terminar. Observe essa linha do código:

var countDownDate = new Date("April 25, 2019 12:00:00").getTime();

Onde está escrito “April”, será o mês onde será definido a data da sua contagem. Lembrando que deve ser trocado em inglês, respectivamente.

No número “25”, será o dia do mês onde a contagem terá o término. Logo depois em “2019”, o ano e “12:00:00”, a hora final.

Alterando a mensagem final quando a contagem expirar

Sim, é possível fazer isso. Nesta parte do código a seguir:

document.getElementById("dday").innerHTML = "SITE NA TEIA";

Como você já sabe, onde está destacado “Site na Teia”, será a sua mensagem final. Por exemplo: A promoção acabou, volte mais tarde.

Posso trocar “d” por “dias”e todo o resto?

Claro. Repare o trecho de código abaixo:

// Display the result in the element with id="demo"

document.getElementById("dday").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

Na parte em que negritamos, como o “d”, “h”, “m” e “s”; você pode alterar como quiser. Só tome cuidado para não atingir o script que será responsável por rodar o conômetro.

Viu só? Não é difícil adicionar uma contagem regressiva em seu site. Depois que você tiver o código personalizado, basta colar no editor e pronto.

Continua depois da publicidade
 

Se tiver dificuldades, veja nosso tutorial em vídeo:

Bom, esperamos ter ajudado. Não esqueça de visitar sempre o Site na Teia para mais dicas 😉

Venha para nosso canal e aprenda mais!
Inscreva-se agora mesmo e comece a personalizar o seu site por completo.
Temos tutoriais diversos para ajudar a desenvolver o seu site além de conteúdos exclusivos.

Adicione o Site na Teia aos seus favoritos!

Pressione CRTL + D em seu teclado e pronto. É fácil e sem complicação!

Posts Relacionados

Marcações: