Programa JavaScript para criar cronômetro de contagem regressiva

Neste exemplo, você aprenderá a escrever um programa JavScript que criará um cronômetro de contagem regressiva.

Para entender este exemplo, você deve ter conhecimento dos seguintes tópicos de programação JavaScript:

  • JavaScript Math floor ()
  • Data e hora do JavaScript
  • Javascript setInterval ()

Exemplo: crie um cronômetro de contagem regressiva

 // program to create a countdown timer // time to countdown from (in milliseconds) let countDownDate = new Date().getTime() + 24 * 60 * 60 * 1000; // countdown timer let x = setInterval(function() ( // get today's date and time in milliseconds let now = new Date().getTime(); // find the interval between now and the countdown time let timeLeft = countDownDate - now; // time calculations for days, hours, minutes and seconds const days = Math.floor( timeLeft/(1000*60*60*24) ); const hours = Math.floor( (timeLeft/(1000*60*60)) % 24 ); const minutes = Math.floor( (timeLeft/1000/60) % 60 ); const seconds = Math.floor( (timeLeft/1000) % 60 ); // display the result in the element with console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); // clearing countdown when complete if (timeLeft < 0) ( clearInterval(x); console.log('CountDown Finished'); ) ), 2000);

Resultado

 0d 23h 59m 57s 0d 23h 59m 55s 0d 23h 59m 53s 0d 23h 59m 51s…

No programa acima, o setInterval()método é usado para criar um cronômetro.

O setInterval()método é executado em um determinado intervalo de tempo (aqui, 2.000 milissegundos).

O new Date()fornece a data e a hora atuais. Por exemplo,

 let d1 = new Date(); console.log(time); // Fri Aug 28 2020 09:19:40 GMT+0545 (+0545)

O getTime()método retorna o número de milissegundos da meia-noite de 1º de janeiro de 1970 (época EcmaScript) até a data especificada (aqui, data atual).

O código a seguir fornece a hora do dia seguinte em milissegundos.

 new Date().getTime() + 24 * 60 * 60 * 1000;

Agora, podemos calcular o tempo restante usando a seguinte fórmula:

 let timeLeft = countDownDate - now;

O número restante de dias é calculado usando:

  • O intervalo de tempo é dividido por 1000 para determinar o número de segundos, ou seja,timeLeft / 1000
  • O intervalo de tempo é dividido por 60 * 60 * 24 para determinar o número de dias restantes.
  • A Math.floor()função é usada para arredondar o número para um número inteiro.

Métodos semelhantes são usados ​​para horas, minutos e segundos.

Nota : Você também pode usar um tempo de contagem regressiva de início personalizado, passando uma data específica.

Por exemplo,

 let countDownDate = new Date("Aug 5, 2025 14:22:36").getTime();

Artigos interessantes...