Crear un temporizador de cuenta regresiva en JavaScript

Muestra el tiempo que queda hasta una fecha futura con JavaScript.

contador-cuenta-regresiva-javascript

En este artículo mostraremos cómo hacer un sencillo contador en JavaScript que muestre el tiempo que queda para llegar a una fecha concreta.

Implementación

Necesitamos un elemento HTML dónde mostraremos el tiempo restante:

<p id="countdown"></p>

Y luego el código JavaScript. Usaremos una función setInterval para actualizar el contador cada segundo. Cuando el tiempo llegue al momento marcado mostraremos un mensaje de FINALIZADO.

const countDownDate = new Date("Jan 1, 2050 18:30:25").getTime();
const updateCountdown = () => {
const now = Date.now();
const timeLeft = countDownDate - now;
if (timeLeft < 0) {
clearInterval(timerInterval);
document.getElementById("countdown").innerHTML = "FINALIZADO";
return;
}
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
};
const timerInterval = setInterval(updateCountdown, 1000);

Como puedes comprobar el código es muy simple. Usamos la fecha final countDownDate y le restamos la fecha actual Date.now(). Hacemos algunos cálculos para obtener los días, horas, minutos y segundos, y concatenamos todos los valores en una cadena de texto que mostramos por pantalla.