Crear un temporizador de cuenta regresiva puede ser una tarea sencilla pero muy útil, ya sea para un evento, un lanzamiento de producto o simplemente para mejorar la experiencia del usuario en tu sitio web. En este artículo, te enseñaremos cómo construir un temporizador de cuenta regresiva utilizando JavaScript junto con Tailwind CSS para estilizarlo de forma efectiva.
Un temporizador de cuenta regresiva es una herramienta que muestra el tiempo restante hasta un evento específico. Generalmente, se expresa en días, horas, minutos y segundos. Este tipo de temporizadores son útiles en diversas aplicaciones, como ventas limitadas, eventos en vivo, y más.
JavaScript es un lenguaje de programación que nos permitirá crear la funcionalidad del temporizador. Usaremos JavaScript para calcular el tiempo restante y actualizar la interfaz de usuario en tiempo real.
Tailwind CSS es un marco de CSS que nos ayudará a diseñar nuestra interfaz de forma eficiente y estética, utilizando clases predefinidas.
Para este proyecto, vamos a crear una estructura básica de HTML que luego estilizaremos usando Tailwind CSS y haremos dinámico con JavaScript.
Primero, crea el archivo index.htmly agrega la siguiente estructura:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Temporizador de cuenta regresiva</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> <script defer src="script.js"></script> </head> <body class="flex items-center justify-center h-screen bg-gray-900"> <div class="text-center text-white"> <h1 class="text-4xl font-bold mb-6">Temporizador de Cuenta Regresiva</h1> <div id="countdown" class="text-6xl font-mono"> <span id="days">00</span>:<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span> </div> </div> </body> </html>
Ahora, en tu archivo script.js, agrega el siguiente código:
const countdown = document.getElementById("countdown"); const daysSpan = document.getElementById("days"); const hoursSpan = document.getElementById("hours"); const minutesSpan = document.getElementById("minutes"); const secondsSpan = document.getElementById("seconds"); // Define la fecha y hora de finalización const eventDate = new Date("2024-12-31T23:59:59").getTime(); const updateCountdown = () => { const now = new Date().getTime(); const distance = eventDate - now; // Cálculos de tiempo const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Actualiza el DOM daysSpan.innerHTML = String(days).padStart(2, '0'); hoursSpan.innerHTML = String(hours).padStart(2, '0'); minutesSpan.innerHTML = String(minutes).padStart(2, '0'); secondsSpan.innerHTML = String(seconds).padStart(2, '0'); // Si el conteo ha terminado if (distance < 0) { clearInterval(interval); countdown.innerHTML = "¡El tiempo ha expirado!"; } }; // Actualiza el temporizador cada segundo const interval = setInterval(updateCountdown, 1000); updateCountdown(); // Llama a la función al cargar la página
El estilo ya está parcialmente aplicado en el HTML. Sin embargo, puedes personalizar aún más los estilos en el archivo CSS si lo deseas. Tailwind CSS te permite agregar variaciones fácilmente, por ejemplo:
#countdown { @apply bg-gray-800 p-4 rounded-md border border-blue-500; }
Crear un temporizador de cuenta regresiva con JavaScript y Tailwind CSS es un proceso sencillo que puede enriquecer la experiencia del usuario en tu sitio web. Puedes personalizar el diseño y la funcionalidad según tus necesidades específicas. Recuerda probar el código y experimentar con diferentes estilos y configuraciones para adaptarlo a tu proyecto.
Si deseas extender esta funcionalidad, considera agregar características adicionales, como una alarma al finalizar la cuenta regresiva o la posibilidad de personalizar la fecha de finalización a través de una interfaz de usuario. ¡Las posibilidades son infinitas!
Esperamos que este artículo te haya sido útil y que puedas implementar tu propio temporizador de cuenta regresiva pronto. ¡Buena suerte!
Page loaded in 32.99 ms