Código de JavaScript - Contador Dinámico con JS solamente

Contador Dinámico con JS solamente

JavaScript

Publicado el 20 de Diciembre del 2024 por Alejandro

305 visualizaciones desde el 20 de Diciembre del 2024

Este código sirve para crear una cuenta regresiva que muestra el tiempo restante hasta una fecha y hora específicas, como el lanzamiento de un producto, un evento o una página web. Se actualiza en tiempo real y muestra los días, horas, minutos y segundos restantes de forma dinámica.

Es ideal para incluir en páginas web o proyectos donde quieras mantener a tus usuarios informados sobre el tiempo restante para un hito importante. Cuando el temporizador llega a cero, se puede mostrar un mensaje personalizado, como "¡Ya estamos en directo!" o cualquier texto que elijas. Ni necesitas más pildoras de Javascript, soy Alejandro Tamargo Desarrollador Web en Asturias

Requerimientos

No se necesita mas que de un HTML donde se necesite implementar

1.0

Publicado el 20 de Diciembre del 2024

gráfica de visualizaciones de la versión: 1.0

305 visualizaciones desde el 20 de Diciembre del 2024

<div class="countdown" style="font-size: 2rem; margin: 20px 0;">

        <p style="font-size: 1.2rem; margin: 10px 0 20px;">Lanzamiento: <span id="timer">00d 00h 00m 00s</span></p>

    </div>

    <script>

        // Fecha objetivo fija en timestamp (31 de diciembre de 2024 23:59:59 GMT)

        const TARGET_DATE = 1735689599000; // Este número no cambiará

        const countdownFunction = setInterval(() => {

            const now = new Date().getTime();

            const distance = TARGET_DATE - now;

            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);

            // Añadimos padding con ceros para mantener consistente el formato

            const displayDays = String(days).padStart(2, '0');

            const displayHours = String(hours).padStart(2, '0');

            const displayMinutes = String(minutes).padStart(2, '0');

            const displaySeconds = String(seconds).padStart(2, '0');

            document.getElementById("timer").innerHTML =

                `${displayDays}d ${displayHours}h ${displayMinutes}m ${displaySeconds}s`;

            if (distance < 0) {

                clearInterval(countdownFunction);

                document.getElementById("timer").innerHTML = "¡Ya estamos en directo!";

        }, 1000);

    </script>

Comentarios sobre la versión: 1.0 (0)

No hay comentarios

Comentar la versión: 1.0


Nombre

Correo (no se visualiza en la web)

Valoración

Comentarios...

CerrarCerrar

Es necesario revisar y aceptar las políticas de privacidad

Acepto las políticas de privacidad

http://lwp-l.com/s7551

CONVERTIR NUMERO ROMANO A NUMERO ENTERO

Código de JavaScript - Contador Dinámico con JS solamente

Requerimientos

1.0

Comentarios sobre la versión: 1.0 (0)

Comentar la versión: 1.0

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.