Pular para o conteúdo

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, 2023 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 já pode substituir algumas partes. Em “color: #000000;”, você deve trocar por uma cor de sua preferência. Aqui neste link tem uma tabela completa pra escolher e personalizar.

Continua depois da publicidade
 

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

Em “font-weight: normal”, 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:

var countDownDate = new Date("April 25, 2023 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 “2023”, o ano e “12:00:00”, a hora final.

Alterando a mensagem final quando a contagem expirar

Sim, é possível fazer isso. Nesta parte a seguir:

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

Como já deve saber, 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 abaixo:

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

Na parte “d”, “h”, “m” e “s”; pode alterar como quiser. Só tome cuidado para não atingir o script que será responsável por rodar o cronô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 😉


Notou algo diferente?
Com o passar do tempo algumas funções podem ser atualizadas ou modificadas. Se notar isso, avise-nos aqui.
Venha para o nosso canal e aprenda muito mais!
Inscreva-se agora mesmo e comece a personalizar o seu site por completo. Trazemos tutoriais com várias dicas além de conteúdos exclusivos.

Posts Relacionados

Marcações:
5 1 voto
O que você achou?
Receba alertas por e-mail
Notificar de
guest
8 Comentários
Comentários em linha
Exibir todos os comentários