Programa JavaScript para crear temporizador de cuenta regresiva

En este ejemplo, aprenderá a escribir un programa JavScript que creará un temporizador de cuenta atrás.

Para comprender este ejemplo, debe tener el conocimiento de los siguientes temas de programación de JavaScript:

  • Piso de matemáticas de JavaScript ()
  • Fecha y hora de JavaScript
  • Javascript setInterval ()

Ejemplo: crear un temporizador de cuenta regresiva

 // 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);

Salida

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

En el programa anterior, el setInterval()método se utiliza para crear un temporizador.

El setInterval()método se ejecuta en un intervalo de tiempo determinado (aquí, 2000 milisegundos).

El new Date()da la fecha y hora actuales. Por ejemplo,

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

El getTime()método devuelve el número de milisegundos desde la medianoche del 1 de enero de 1970 (época de EcmaScript) hasta la fecha especificada (aquí, fecha actual).

El siguiente código da la hora del día siguiente en milisegundos.

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

Ahora, podemos calcular el tiempo restante usando la siguiente fórmula:

 let timeLeft = countDownDate - now;

El número restante de días se calcula utilizando:

  • El intervalo de tiempo se divide por 1000 para determinar el número de segundos, es decirtimeLeft / 1000
  • Luego, el intervalo de tiempo se divide por 60 * 60 * 24 para determinar el número de días restantes.
  • La Math.floor()función se usa para redondear el número a un número entero.

Se utilizan métodos similares durante horas, minutos y segundos.

Nota : También puede utilizar un tiempo de cuenta atrás de inicio personalizado pasando una fecha específica.

Por ejemplo,

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

Articulos interesantes...