Como Crear un Countdown en Javascript
En el desarrollo web moderno, los contadores regresivos o countdowns son herramientas populares que se utilizan en una variedad de escenarios, como promociones de tiempo limitado, eventos en vivo, lanzamientos de productos, entre otros. Crear un countdown en JavaScript es una tarea sencilla y útil para mejorar la experiencia del usuario en tu sitio web. En este artículo, te guiaré paso a paso para crear un sencillo contador regresivo utilizando JavaScript.
Un contador regresivo es una herramienta visual que cuenta hacia atrás desde un tiempo específico hasta cero. Los contadores regresivos pueden ser extremadamente útiles para:
- Mostrar el tiempo restante hasta un evento o promoción.
- Crear un sentido de urgencia para los usuarios.
Vamos a construir un contador regresivo básico utilizando JavaScript, HTML y CSS. Una vez construido, tendrás una comprensión clara de cómo implementar y personalizar tu propio countdown en tus proyectos web.
Estructura HTML Básica
Comencemos creando la estructura HTML básica para nuestro contador regresivo. Crearemos un contenedor simple donde se mostrará el countdown.
<div class="countdown-timer">
<ul class="countdown-timer-ul">
<p class="deadline-label"><span>May 26, 2025 23:59:59</span></p>
<div class="countainer-ul">
<li class="date-item"><span class="days">0</span>Days</li>
<li class="date-item"><span class="hours">0</span>Hours</li>
<li class="date-item"><span class="minutes">0</span>Minutes</li>
<li class="date-item"><span class="seconds">0</span>Seconds</li>
</div>
</ul>
</div>Estilos CSS Básicos
Ahora procederemos a darle estilos a nuestro contador, para este ejemplo estamos aplicando estilos básicos para ilustrar el funcionamiento, tú podrás personalizar el diseño de acuerdo con tus necesidades.
.countdown-timer {
animation: fadeIn 2s ease-in-out;
align-items: center;
background-color: #131a2b;
border-radius: 0px;
color: #fff;
font-size: 15px;
font-weight: 600;
padding: 8px;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.countdown-timer .countainer-ul {
display: flex;
justify-content: space-evenly;
}
.countdown-timer-ul {
border-radius: 25px;
color: #000;
margin: auto auto 15px auto;
position: relative;
text-align: center;
transition: opacity 0.7s ease-in-out;
position: relative;
width: 40%;
}
.countdown-timer-ul .deadline-label {
color: #fff;
font-size: 12px;
margin-bottom: 5px;
margin-right: 10%;
text-align: right;
text-transform: uppercase;
}
.countdown-timer .date-item {
background-color: #fafafa52;
border-radius: 5px;
color: #fff;
text-align: center;
font-size: 1.2rem;
width: 88px;
}
.countdown-timer ul {
margin-bottom: 0px;
padding: 0px;
}
.countdown-timer ul li span {
display: block;
font-size: 3rem;
}
li {
display: inline-block;
font-size: 1em;
list-style-type: none;
padding: 0.5em;
text-transform: uppercase;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}Agregando funcionalidad con JavaScript
Por último, necesitamos agregar toda la interacción necesaria usando JavaScript, primero necesitamos definir fecha para nuestro contador (puedes manejarlo como una fecha dinámica proveniente de una base de datos o una fecha estática definida) y a partir de esta fecha ir obteniendo los días, horas, minutos y segundos restantes.
Debemos actualizar cada segundo la fecha restante usando setInterval y asegurarnos de que si llegamos a la fecha límite, detener esta función y de acuerdo con el comportamiento que necesitemos mostrar un mensaje de tiempo expirado o dejar en cero los contadores.
const expirationDate = 'May 28, 2024 23:59:59'; // Define or get your date
let deadlineTime = new Date(expirationDate);
deadlineTime.setDate(deadlineTime.getDate());
let deadline = deadlineTime.getTime();
// Function to update countdown timer
function updateCountdown() {
if (countdownInterval !== null) {
// Getting current time in required format
let now = new Date().getTime();
let timeToLive = deadline - now;
// Getting value of days, hours, minutes, seconds
let days = Math.floor(timeToLive / (1000 * 60 * 60 * 24));
let hours = Math.floor((timeToLive % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((timeToLive % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((timeToLive % (1000 * 60)) / 1000);
let daysElements = document.getElementsByClassName("days");
let hoursElements = document.getElementsByClassName("hours");
let minutesElements = document.getElementsByClassName("minutes");
let secondsElements = document.getElementsByClassName("seconds");
// If you have many countdowns, you could fill all the tags using the classname
Array.from(daysElements).forEach(el => el.innerHTML = days);
Array.from(hoursElements).forEach(el => el.innerHTML = hours);
Array.from(minutesElements).forEach(el => el.innerHTML = minutes);
Array.from(secondsElements).forEach(el => el.innerHTML = seconds);
// Output for over time
if (timeToLive < 0) {
countdownInterval && clearInterval(countdownInterval);
Array.from(daysElements).forEach(el => el.innerHTML = 0);
Array.from(hoursElements).forEach(el => el.innerHTML = 0);
Array.from(minutesElements).forEach(el => el.innerHTML = 0);
Array.from(secondsElements).forEach(el => el.innerHTML = 0);
}
}
}
// To call defined function every second
let countdownInterval = null;
updateCountdown();
countdownInterval = setInterval(updateCountdown, 1000);Con estos cambios en los archivos, hemos creado nuestro countdown para nuestro sitio web, a continuación se muestra el resultado final en CodePen.
Resultado final
Resumen
Crear un contador regresivo en JavaScript es una tarea sencilla pero efectiva para mejorar la experiencia del usuario en tu sitio web. Al seguir los pasos detallados en este artículo, puedes implementar y personalizar tu propio countdown. Aquí hay algunas recomendaciones finales:
- Personaliza el Diseño: Ajusta los estilos CSS para que el countdown se alinee con el diseño de tu sitio web.
- Asegúrate de la Exactitud: Verifica que la fecha y hora de destino sean correctas y realiza las pruebas necesarias.
- Optimiza el Rendimiento: Asegúrate de que el código JavaScript sea eficiente y no afecte negativamente el rendimiento de la página.
Con estas recomendaciones en mente, podrás crear un contador regresivo que no solo sea funcional, sino también visualmente atractivo y eficiente.
Read this story in English:
