Script de Cuenta Regresiva para Landing Page -

Script de Cuenta Regresiva para Landing Page

Para generar un script de cuenta regresiva para una landing page de ventas, podemos usar HTML, CSS y JavaScript. Te daré un script completo que es fácil de implementar y personalizar.

Script de Cuenta Regresiva para Landing Page

Este script mostrará una cuenta regresiva hasta una fecha y hora específicas. Cuando la cuenta regresiva llegue a cero, puedes mostrar un mensaje personalizado o redirigir al usuario.

1. Estructura HTML ( `index.html` )

Primero, crea un archivo index.html con la estructura básica. Aquí es donde se mostrará la cuenta regresiva.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page – ¡Oferta Exclusiva!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hero-section">
        <h1>¡No te pierdas nuestra oferta especial!</h1>
        <p>El tiempo se acaba. Consigue descuentos increíbles solo por tiempo limitado.</p>
        <div id="countdown" class="countdown-timer">
            <div>
                <span class="countdown-value" id="days">00</span>
                <span class="countdown-label">Días</span>
            </div>
            <div>
                <span class="countdown-value" id="hours">00</span>
                <span class="countdown-label">Horas</span>
            </div>
            <div>
                <span class="countdown-value" id="minutes">00</span>
                <span class="countdown-label">Minutos</span>
            </div>
            <div>
                <span class="countdown-value" id="seconds">00</span>
                <span class="countdown-label">Segundos</span>
            </div>
        </div>
        <div id="countdown-message" class="countdown-message" style="display:none;">
            <h2>¡La oferta ha terminado!</h2>
            <p>Pero no te preocupes, ¡pronto tendremos nuevas promociones!</p>
        </div>
        <a href="#" class="btn-action">¡Quiero mi oferta!</a>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. Estilos CSS ( `style.css` )

Crea un archivo style.css para darle un aspecto atractivo a tu landing page y a la cuenta regresiva.

CSS

body {
    font-family: ‘Arial’, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}

.hero-section {
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 90%;
}

.hero-section h1 {
    color: #e63946;
    margin-bottom: 15px;
    font-size: 2.5em;
}

.hero-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.countdown-timer > div {
    background-color: #457b9d;
    color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.countdown-value {
    font-size: 3em;
    font-weight: bold;
}

.countdown-label {
    font-size: 0.9em;
    text-transform: uppercase;
    margin-top: 5px;
}

.countdown-message {
    color: #e63946;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 30px;
}

.countdown-message p {
    font-size: 1em;
    color: #555;
    font-weight: normal;
}

.btn-action {
    background-color: #a8dadc;
    color: #fff;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.3em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-action:hover {
    background-color: #89c0c2;
}

3. Lógica JavaScript ( `script.js` )

Finalmente, crea un archivo script.js que contendrá la lógica de la cuenta regresiva.

JavaScript

document.addEventListener(‘DOMContentLoaded’, function() {
    // ** CONFIGURACIÓN: FECHA Y HORA OBJETIVO DE LA CUENTA REGRESIVA **
    // Establece la fecha y hora final de tu oferta.
    // Formato: «Mes Día, Año Hora:Minutos:Segundos»
    // Ejemplo: «Jul 31, 2025 23:59:59»
    // ** Asegúrate de ajustar esta fecha y hora a tu necesidad **
    const countdownDate = new Date(«Aug 15, 2025 10:00:00»).getTime();

    const daysSpan = document.getElementById(‘days’);
    const hoursSpan = document.getElementById(‘hours’);
    const minutesSpan = document.getElementById(‘minutes’);
    const secondsSpan = document.getElementById(‘seconds’);
    const countdownDiv = document.getElementById(‘countdown’);
    const countdownMessageDiv = document.getElementById(‘countdown-message’);

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = countdownDate – 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);

        // Muestra el resultado en los elementos
        daysSpan.textContent = String(days).padStart(2, ‘0’);
        hoursSpan.textContent = String(hours).padStart(2, ‘0’);
        minutesSpan.textContent = String(minutes).padStart(2, ‘0’);
        secondsSpan.textContent = String(seconds).padStart(2, ‘0’);

        // Cuando la cuenta regresiva ha terminado
        if (distance < 0) {
            clearInterval(countdownInterval); // Detiene el intervalo
            countdownDiv.style.display = 'none'; // Oculta la cuenta regresiva
            countdownMessageDiv.style.display = 'block'; // Muestra el mensaje de finalización

            // Opcional: Redirigir a otra página o cambiar contenido
            // window.location.href = "oferta-finalizada.html";
        }
    }

    // Actualiza la cuenta regresiva cada segundo
    const countdownInterval = setInterval(updateCountdown, 1000);

    // Ejecuta la función una vez al cargar para evitar un retraso inicial
    updateCountdown();
});

Cómo Usarlo:

Guarda los archivos:
- index.html
- style.css
- script.js todos en la misma carpeta.
Abre index.html en tu navegador para ver la cuenta regresiva.
Personaliza la fecha: Abre script.js y cambia la línea:JavaScriptconst countdownDate = new Date("Aug 15, 2025 10:00:00").getTime(); por la fecha y hora exactas en que quieres que termine tu oferta. Asegúrate de usar el formato Mes Día, Año Hora:Minutos:Segundos.
Personaliza el contenido: Edita el texto en index.html y los estilos en style.css para que se ajusten a tu marca y mensaje de ventas.
Acción al finalizar: Cuando la cuenta regresiva llega a cero, el script oculta los números y muestra un mensaje. Puedes modificar este comportamiento en script.js para, por ejemplo, redirigir al usuario a otra página (descomentando y ajustando la línea window.location.href = "oferta-finalizada.html";).

Consideraciones Adicionales:

Zona Horaria: La función new Date() de JavaScript utiliza la zona horaria local del navegador del usuario. Si tu oferta es para una audiencia global y necesitas una cuenta regresiva precisa independientemente de la ubicación del usuario, deberías considerar especificar la fecha en UTC o usar una librería de gestión de fechas más robusta (como Moment.js o Luxon, aunque para este caso simple, no es estrictamente necesario).
Contenido Dinámico: Para una landing page de ventas real, probablemente querrás que el contenido de la oferta y la fecha de finalización sean gestionables desde un sistema de gestión de contenido (CMS) o un backend, en lugar de estar codificados directamente en el JavaScript.
SEO: El contenido de la cuenta regresiva es dinámico (generado por JavaScript). Si la visibilidad para los motores de búsqueda es crítica para los números de la cuenta regresiva, asegúrate de que el contenido inicial del HTML sea relevante incluso antes de que el JavaScript se ejecute.
Accesibilidad: Asegúrate de que los colores tengan suficiente contraste y que la estructura sea semánticamente correcta para usuarios con lectores de pantalla.

¡Espero que este script te sea muy útil para tu landing page de ventas!

Código Completo del Script de Cuenta Regresiva para Incrustar en una Página Existente

Este bloque de código se puede pegar en el editor HTML de tu entrada de blog. Busca la opción «Editar como HTML» o «Texto» en lugar de «Visual» en WordPress.

Asegúrate de cambiar la fecha y hora de la cuenta regresiva en la sección de JavaScript (const countdownDate = new Date("Aug 15, 2025 10:00:00").getTime();) a la fecha de tu propia oferta.

HTML

<div class="countdown-container-wrapper">
    <style>
        /* Estilos CSS para la cuenta regresiva */
        .countdown-container-wrapper {
            font-family: 'Arial', sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 30px auto; /* Centra el contenedor y le da margen */
            border: 1px solid #ddd;
        }

        .countdown-container-wrapper h3 {
            color: #e63946;
            margin-bottom: 15px;
            font-size: 1.8em;
        }

        .countdown-container-wrapper p {
            font-size: 1.1em;
            color: #555;
            margin-bottom: 25px;
        }

        .countdown-timer-inline {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
        }

        .countdown-timer-inline > div {
            background-color: #457b9d;
            color: #fff;
            padding: 15px 20px;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 80px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .countdown-value-inline {
            font-size: 2.5em;
            font-weight: bold;
            line-height: 1; /* Elimina espacio extra */
        }

        .countdown-label-inline {
            font-size: 0.8em;
            text-transform: uppercase;
            margin-top: 5px;
        }

        .countdown-message-inline {
            color: #e63946;
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 20px;
            display: none; /* Oculto por defecto */
        }

        .countdown-message-inline p {
            font-size: 0.9em;
            color: #777;
            font-weight: normal;
        }

        .btn-action-inline {
            background-color: #a8dadc;
            color: #fff;
            padding: 12px 25px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1.1em;
            font-weight: bold;
            transition: background-color 0.3s ease;
            display: inline-block; /* Para que tome padding y margen */
            margin-top: 10px;
        }

        .btn-action-inline:hover {
            background-color: #89c0c2;
        }

        /* Media queries para responsividad */
        @media (max-width: 480px) {
            .countdown-timer-inline > div {
                min-width: 60px;
                padding: 10px 15px;
            }
            .countdown-value-inline {
                font-size: 2em;
            }
            .countdown-label-inline {
                font-size: 0.7em;
            }
            .countdown-container-wrapper h3 {
                font-size: 1.5em;
            }
            .countdown-container-wrapper p {
                font-size: 1em;
            }
            .btn-action-inline {
                font-size: 1em;
                padding: 10px 20px;
            }
        }
    </style>

    <h3>¡Última oportunidad para conseguir esta oferta!</h3>
    <p>El tiempo para aprovechar nuestro descuento exclusivo se está agotando:</p>

    <div id="countdown-inline" class="countdown-timer-inline">
        <div>
            <span class="countdown-value-inline" id="days-inline">00</span>
            <span class="countdown-label-inline">Días</span>
        </div>
        <div>
            <span class="countdown-value-inline" id="hours-inline">00</span>
            <span class="countdown-label-inline">Horas</span>
        </div>
        <div>
            <span class="countdown-value-inline" id="minutes-inline">00</span>
            <span class="countdown-label-inline">Minutos</span>
        </div>
        <div>
            <span class="countdown-value-inline" id="seconds-inline">00</span>
            <span class="countdown-label-inline">Segundos</span>
        </div>
    </div>

    <div id="countdown-message-inline" class="countdown-message-inline">
        <h4>¡Esta oferta ha finalizado!</h4>
        <p>Pero no te preocupes, ¡síguenos para futuras promociones increíbles!</p>
    </div>

    <a href="URL_DE_TU_OFERTA" class="btn-action-inline">¡Quiero aprovechar la oferta!</a>

    <script>
        // Lógica JavaScript para la cuenta regresiva
        document.addEventListener('DOMContentLoaded', function() {
            // ** CONFIGURACIÓN: FECHA Y HORA OBJETIVO DE LA CUENTA REGRESIVA **
            // Establece la fecha y hora final de tu oferta.
            // Formato: "Mes Día, Año Hora:Minutos:Segundos" (ej: "Aug 15, 2025 10:00:00")
            // Reemplaza esta fecha con la de tu propia oferta.
            const countdownDateInline = new Date("December 31, 2025 23:59:59").getTime(); // <--- ¡CAMBIA ESTA FECHA!

            const daysSpan = document.getElementById('days-inline');
            const hoursSpan = document.getElementById('hours-inline');
            const minutesSpan = document.getElementById('minutes-inline');
            const secondsSpan = document.getElementById('seconds-inline');
            const countdownDiv = document.getElementById('countdown-inline');
            const countdownMessageDiv = document.getElementById('countdown-message-inline');
            const actionButton = document.querySelector('.btn-action-inline'); // Selecciona el botón de acción

            function updateCountdownInline() {
                const now = new Date().getTime();
                const distance = countdownDateInline - 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);

                // Muestra el resultado, asegurándose de tener dos dígitos
                daysSpan.textContent = String(days).padStart(2, '0');
                hoursSpan.textContent = String(hours).padStart(2, '0');
                minutesSpan.textContent = String(minutes).padStart(2, '0');
                secondsSpan.textContent = String(seconds).padStart(2, '0');

                // Cuando la cuenta regresiva ha terminado
                if (distance < 0) {
                    clearInterval(countdownIntervalInline); // Detiene el intervalo
                    countdownDiv.style.display = 'none'; // Oculta la cuenta regresiva
                    countdownMessageDiv.style.display = 'block'; // Muestra el mensaje de finalización
                    actionButton.style.display = 'none'; // Oculta el botón de acción

                    // Opcional: Cambiar el texto del mensaje final o redirigir
                    // countdownMessageDiv.querySelector('h4').textContent = "¡Oferta caducada!";
                    // window.location.href = "https://tu-sitio.com/oferta-finalizada";
                }
            }

            // Actualiza la cuenta regresiva cada segundo
            const countdownIntervalInline = setInterval(updateCountdownInline, 1000);

            // Ejecuta la función una vez al cargar para evitar un retraso inicial
            updateCountdownInline();
        });
    </script>
</div>

Cómo instalarlo en tu entrada de WordPress (o similar):

Edita tu entrada/página: Abre la entrada de blog o la página donde quieres añadir la cuenta regresiva.
Cambia al editor HTML/Texto: En WordPress, busca la pestaña o el botón que dice "HTML", "Texto", "Editor de código" o "Personalizar HTML" (dependiendo de la versión de WordPress o del tema que uses, y si utilizas el editor clásico o Gutenberg).
- En Gutenberg (editor de bloques): Añade un bloque de "HTML personalizado" y pega el código ahí.
- En el editor clásico: Cambia de la pestaña "Visual" a la pestaña "Texto" (o HTML) y pega el código.
Pega el código: Copia todo el código de arriba (desde div class="countdown-container-wrapper" hasta </div>) y pégalo en el lugar de tu entrada donde quieras que aparezca la cuenta regresiva.
Ajusta la fecha: Vuelve a la sección <script> dentro del código pegado y modifica la línea:JavaScriptconst countdownDateInline = new Date("December 31, 2025 23:59:59").getTime(); // <--- ¡CAMBIA ESTA FECHA! Reemplaza "December 31, 2025 23:59:59" con la fecha y hora exactas de finalización de tu oferta.
Ajusta el enlace del botón: Cambia URL_DE_TU_OFERTA en la etiqueta <a> por el enlace real a tu página de ventas o producto.
Guarda/Actualiza: Guarda o actualiza tu entrada de blog.

Beneficios de esta aproximación:

Autocontenido: El CSS y JavaScript están incrustados directamente en el HTML, lo que facilita su copia y pega en cualquier editor de contenido que soporte HTML.
Aislamiento: Al encapsular todo dentro de un div con clases específicas (countdown-container-wrapper, countdown-timer-inline, etc.), se minimiza el riesgo de conflictos de estilos con el CSS existente de tu tema de WordPress.
Fácil personalización: Puedes cambiar los textos, colores y el estilo general directamente en el bloque <style> sin afectar otras partes de tu sitio.
Responsivo: Incluye algunas media queries básicas para que se vea bien en dispositivos móviles.