Muestra el tiempo que queda hasta una fecha futura con 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.
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.