Cómo crear un temporizador de cuenta regresiva con Vanilla JavaScript

Introducción

Un temporizador de cuenta regresiva es un reloj virtual que inicia (o detiene) la cuenta regresiva desde una fecha específica para marcar el inicio (o el final) de un evento. Esto se usa comúnmente en la página de inicio de un sitio web de comercio electrónico, sitios web en construcción, páginas de eventos y varios otros lugares.

Por lo general, se utilizan para cumpleaños, cuenta regresiva de Año Nuevo, promociones e incluso deportes. El propósito principal de una cuenta regresiva es para inspirar a la gente a tomar acciónantes de que sea demasiado tarde, como comprar artículos o servicios, anticipar y registrarse para un evento, etc.

Básicamente, reservaríamos una fecha determinada por adelantado. Luego, usando JavaScript, podemos inferir la fecha actual a partir de la fecha especificada, que se realiza cada segundo, minuto u hora.

En esta guía práctica, aprenderemos cómo crear un temporizador de cuenta regresiva y comprenderemos el razonamiento detrás de esto mediante la creación de un programa reutilizable que se puede usar en una amplia variedad de páginas de destino. Lo construiremos completamente en Vanilla JavaScript y, hacia el final, veremos cómo se podría hacer también con bibliotecas de fechas de JavaScript como Moment.js.

Notar: El código fuente de la aplicación también está disponible en GitHub.

Crear un temporizador de cuenta regresiva con JavaScript

Es recomendable comprender cómo crear un temporizador de cuenta regresiva usando solo JavaScript, en lugar de una solución o un complemento precortado, a menos que necesite agregar una funcionalidad más específica que se admita mejor con una biblioteca en lugar de hacerlo desde cero.

Debido a que no tiene dependencias, crearlo con Vanilla JavaScript le permite tener un código liviano: su sitio web no estará abarrotado y no necesitará cargar scripts externos y hojas de estilo. Tendrá un mejor control, lo que significa que podrá diseñar el temporizador para que se comporte y aparezca exactamente de la manera que desee, en lugar de intentar modificar un complemento a su voluntad.

Comenzar

Fijemos una fecha objetivo, que servirá como día del evento creamos una cuenta regresiva para . También puede crear dinámicamente esta fecha en función de parámetros, como crear una cuenta regresiva para que un usuario verifique su dirección de correo electrónico.

Implementaremos una fecha estática por razones de brevedad:

let interval;
const eventDay = new Date('03/03/2022');

Notar: los Date El constructor toma fechas en el formato (MM/DD/YYYY). También tenemos en blanco interval para su posterior asignación.

Definamos también algunos valores constantes. Por lo general, el trabajo con el tiempo (en la escala de segundos) se realiza mediante milisegundosy la mayoría de los métodos/comandos aceptan y regresan milisegundo valores.

Sobre esta base, definamos la duración de un second, minute, hour y daypara que podamos usarlos si es necesario para la cuenta regresiva:

const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
Creación de una función de cuenta atrás

Ahora vayamos al corazón de la lógica: ¡la función de cuenta regresiva!

const countDownFn = () => {
   
}

Dependiendo de la frecuencia con la que desee que se actualice el temporizador, cada segundo, minuto u hora llamará a la función de manera adecuada. intervalos:

everySecond = setInterval(countDownFn, second)
everyMinute = setInterval(countDownFn, minute)
everyHour = setInterval(countDownFn, hour)

Ahora vamos a obtener la fecha actual y luego restarla de la eventDay (en el futuro) para saber la diferencia entre ellos. Entonces, en base a esta diferencia, sabremos que todavía quedan muchos días, horas, minutos y segundos:

let now = new Date();
let timeSpan = eventDay - now;

Notar: Es importante colocar la instanciación para el tiempo actual (now) dentro de la función de cuenta regresiva, porque la "hora actual" cambia constantemente. Cuando llamamos a la función para actualizar el temporizador, obtiene la hora actual. En segundo lugar, usamos let En vez de const, ya que el valor cambia cada segundo.

¡Finalmente, agreguemos un cheque para ver si el día del evento ha llegado o no! Una vez que llega a cero, ya no hay necesidad de contar hacia atrás. Para ello utilizaremos un if-elseif declaración.

Primero, implementemos el if declaración para verificar si el día del evento definido por el usuario ya está en el pasado:

if (timeSpan <= -today) {
  console.log("Unfortunately we have past the event day");
  clearInterval(interval);
}

timeSpanel resultado de restar la fecha y hora actual de la eventDay es menor o igual a cualquier tiempo después de hoy - es negativo, o más bien, en el pasado.

Finalmente, verifiquemos si la cuenta regresiva debe terminar:

else if (timeSpan <= 0) {
  console.log("Today is the event day");
  clearInterval(interval);
  return;
}

los clearInterval() La función borra el intervalo, por lo que esta lógica no se vuelve a llamar cada intervalo (segundo, minuto, etc.).

Finalmente, podemos calcular el número de segundos, minutos, horas y días que quedan, si las dos comprobaciones anteriores resultan false:

else {
  const days = Math.floor(timeSpan / day)
  const hours = Math.floor((timeSpan % day) / hour)
  const minutes = Math.floor((timeSpan % hour) / minute)
  const seconds = Math.floor((timeSpan % minute) / second)

  console.log(days + ":" + hours + ":" + minutes + ":" + seconds);
}

En lugar de imprimir en la consola, ¡construyamos una página HTML simple para mostrar los resultados!

página HTML

Consulte nuestra guía útil y práctica para aprender Git, con las mejores prácticas, los estándares aceptados por la industria y la hoja de trucos incluida. Deja de buscar en Google los comandos de Git y, de hecho, aprender ¡esta!

Construyamos una pequeña página para mostrar los resultados. Querremos tener algún tipo de elemento para, digamos, tiempo de día, hora, minuto y el segundo:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>JS Countdown Timer</title>
	</head>
	<body>
		<div class="date-countdown-container">
			<h2 id="day">0</h2>
			<p>:</p>
			<h2 id="hour">0</h2>
			<p>:</p>
			<h2 id="minute">0</h2>
			<p>:</p>
			<h2 id="second">0</h2>
		</div>
		<script src="./app.js"></script>
	</body>
</html>

los app.js el script contiene todo el código, incluido el countDownFn(). Ahora podemos modificar la salida de la función para que no imprima los valores a la consola, sino que modifique el day, hour, minute y second división:

let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');


const countDownFn = () => {...}


dayField.innerHTML = days;
hourField.innerHTML = hours;
minuteField.innerHTML = minutes;
secondField.innerHTML = seconds;

¡Esto debería funcionar muy bien! Sin embargo, no es realmente elegante. Sigamos adelante y agreguemos algo de CSS para que sea mucho más agradable de ver.

CSS - Cuenta regresiva de estilo

¡Agreguemos un poco de estilo al temporizador! Agregaremos una fuente más agradable, cambiaremos el color de fondo, centralizaremos los elementos y los colocaremos en contenedores con estilos y sombras:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Poppins', sans-serif;
  height: 100vh;
  width: 100%;
  background: rgb(175, 90, 90);
  display: flex;
  justify-content: center;
  align-items: center;
}

.date-countdown-container{
  display: flex;
  align-items: center;
  gap: 30px;
}

.date-countdown-container h2{
  background-color: #ddd;
  padding: 20px;
  border-radius: 10px;
  border: 5px solid #fff;
  -webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0); 
  box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}

.date-countdown-container p{
  background-color: #ddd;
  padding: 2px;
  border-radius: 10px;
  border: 2px solid #fff;
  -webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0); 
  box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}

Listo, agreguemos la hoja de estilo a la <head> del archivo HTML:

<link rel="stylesheet" href="style.css"/>

Ejecución de aplicaciones

Finalmente, ¡podemos iniciar la aplicación!

Implementación fácil de la cuenta regresiva de Vanilla JS

¿Usas Moment.js?

Si ya está usando Moment.js, no hay nada de malo en usarlo también para eso. No es absolutamente necesario tener una dependencia si no la necesita para nada más, pero proporciona una herramienta útil diff() Una función:

const eventDay = moment("2023-06-03");
const now = moment();
const timeSpan = eventDay.diff(now);

En pocas palabras, estas tres líneas son las principales variables que ayudan a que se ejecute la cuenta regresiva, y estas son las variables que usted otorga o permite obtener del programa, en este caso de Moment.js.

Si tuviera que reemplazar la lógica de gestión del tiempo del código original con esta, contendría:


let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');

let interval;
const eventDay = moment("2023-06-03");
  

const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
  
const countDownFn = () => {
    const today = moment();
    const timeSpan = eventDay.diff(today);
  
    if (timeSpan <= -today) {
        console.log("Unfortunately we have past the event day");
        clearInterval(interval);
        return;
    } else if (timeSpan <= 0) {
        console.log("Today is the event day");
        clearInterval(interval);
        return;
    } else {
        const days = Math.floor(timeSpan / day);
        const hours = Math.floor((timeSpan % day) / hour);
        const minutes = Math.floor((timeSpan % hour) / minute);
        const seconds = Math.floor((timeSpan % minute) / second);
  
        
        dayField.innerHTML = days;
        hourField.innerHTML = hours;
        minuteField.innerHTML = minutes;
        secondField.innerHTML = seconds;
    }
};
  
interval = setInterval(countDownFn, second);

Conclusión

En esta guía práctica, aprendimos cómo crear nuestro propio temporizador de cuenta regresiva con solo un breve script de JavaScript y cómo crear una página HTML para mostrar el temporizador de cuenta regresiva, así como también cómo usar Moment.js para realizar aritmética de tiempo.

Si quieres conocer otros artículos parecidos a Cómo crear un temporizador de cuenta regresiva con Vanilla JavaScript puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas