Como criar um cronômetro de contagem regressiva em JavaScript

Os temporizadores da contagem regressiva são uma espécie de relógios virtuais que contam o tempo até uma data específica para marcar o início ou o fim de uma ocasião especial. Eles foram usados ​​principalmente na página de destino dos novos sites futuros, mas agora eles chegaram aos sites de comércio eletrônico.

O elemento "Time está acabando" nas páginas de contagem regressiva ajuda a criar urgência para gerar mais conversões em sites de comércio eletrônico. Os temporizadores também podem ser usados ​​em sites ou blogs para exibir uma contagem regressiva para eventos especiais i.e. aniversários, aniversários, reuniões etc. Os temporizadores de contagem regressiva também podem ser usados ​​para contar o tempo até que uma oferta esteja disponível

Neste guia de instruções, faremos um contador de tempo em JavaScript de baunilha, em vez de usar bibliotecas ou plugins de terceiros. Os benefícios da criação do relógio de contagem regressiva no Javascript de baunilha são os seguintes:

• O código é mais leve porque não há dependências.
• Melhora o desempenho do site, pois não há necessidade de carregar folhas de estilo externas e scripts.

Como criar um cronômetro de contagem regressiva em JavaScript

O básico do cronômetro de contagem regressiva são os seguintes:

Defina a data final do temporizador

A primeira etapa da criação de um cronômetro de contagem regressiva é definir a data final do cronômetro. Nesta etapa, declararemos uma variável e atribuiremos o valor da data final do nosso timer usando o Data objeto:

var enddate = nova data ('20 de agosto de 2021 00:00:00').consiga tempo();

No exemplo acima, usamos o .consiga tempo() método; isso é porque o .consiga tempo() Método converte a data em um formato mais utilizável. Ele retorna o número de milissegundos que se passaram desde a meia -noite de 1º de janeiro de 1970, o que facilita a execução de operações matemáticas no data final variável.

Faça uma função de evento de tempo

Agora vamos fazer um setInterval () função que executará repetidamente o código dentro dele após o intervalo de tempo especificado. Isso ocorre porque queremos atualizar nosso cronômetro após cada segundo:

var countdowntimer = setInterval (() =>
// Todo o código JavaScript mencionado abaixo entra nessa função
, 1000);

O setInterval () A função leva o argumento do intervalo em milissegundos; Como existem 1000 milissegundos dentro de um segundo e queremos atualizar o balcão após cada segundo, demos 1000 como o intervalo da função do evento de tempo.

Calculando o tempo

Agora vamos escrever código dentro do setInterval () função. Nesta etapa, calcularemos o tempo restante até o fim do horário do balcão:

var agora = nova data ().consiga tempo();
var restanteTime = enddate - agora;

Agora o valor do tempo restante presente na variável tempo restante está na forma de milissegundos, mas queremos mostrar o número restante de dias, horas, minutos e segundos, para que precisemos converter o número de milissegundos em nossos períodos de tempo necessários:

const Second = 1000;
const minute = segundo * 60;
const hora = minuto * 60;
const dia = hora * 24;
DaysLeft = Math.trunc (tempo restante / dia);
HorasLeft = Math.trunc ((tempo restante % dia) / hora);
MinutesLeft = Math.trunc ((tempo restante % hora) / minuto);
SecondSleft = Math.trunc ((tempo restante % minuto) / segundo);

Existem 1.000 milissegundos dentro de um segundo, 60.000 milissegundos (1000*60) dentro de um minuto, 3.600.000 milissegundos (1000*60*60) em uma hora e 86.400.000 milissegundos (1000*60*60*24) em um dia.

Calculamos os dias restantes dividindo a quantidade de milissegundos presentes em tempo restante pela quantidade de milissegundos em um dia; Se restarem 86.400.000 milissegundos, então dias restantes será igual a um (86.400.000/86.400.000), se houver 172.800.000 milissegundos restantes então dias restantes será igual a 2 (172.800.000/86.400.000) e assim por diante. O número retornado pela operação (restante / dia) será geralmente um número decimal, mas precisamos apenas da parte do número inteiro, por isso usamos o Matemática.trun () método.

Para calcular o horas restantes Nós nos livramos dos dias usando o operador do módulo. Em seguida, calculamos as horas a partir do tempo restante. Podemos calcular o minutos restantes e SegundoSleft variáveis ​​da mesma forma.

Exibindo o temporizador

Nesta etapa, adicionaremos algum código (tags) ao corpo HTML; Então vamos acessar essas tags no setInterval () função e modifique -os para mostrar o timer na página da web:

Dentro de setInterval () função:

documento.QuerySelector ('#Days').INNERHTML = DaysLeft + 'Days';
documento.QuerySelector ('#Hours').INNERHTML = HORASLEFT + 'HORAS';
documento.QuerySelector ('#minutos').INNERHTML = MinutesLeft + 'Minutes';
documento.QuerySelector ('#Seconds').INNERHTML = SecondSleft + 'Seconds';

Agora vamos adicionar mais um código no setInterval () Função que será executada caso o timer esteja acima:

if (restante <= 0)
documento.Write ('Time Up!');

Em todo o arquivo HTML, para um cronômetro de contagem regressiva deve se parecer com a seguinte:

Um cronômetro de contagem regressiva foi feito com sucesso; Agora você pode estilizar com CSS.

Conclusão

Os temporizadores da contagem regressiva são usados ​​em sites ao vivo em breve, bem como em muitos sites de comércio eletrônico. Os sites de comércio eletrônico usam temporizadores para convencer o cliente a tomar decisões rápidas. A resolução deste post foi explorar a criação de um cronômetro de contagem regressiva em JavaScript.