Reloj de cuenta atrás en JavaScript

Vamos a mejorar un poco la plantilla básica en HTML que compartí hace unos días, agregándole un reloj de cuenta atrás en JavaScript.

Puedes usar una cuenta regresiva, por ejemplo para el lanzamiento de un sitio web. Simplemente usando un reloj que cuenta los días, minutos y segundos que faltan para la puesta en marcha.

En este caso, vamos a hacer un ejemplo utilizando un reloj que indica cuanto falta para que comience el mundial de Qatar 2022.

Una vez terminado se verá como la siguiente imagen:

Primero el código en HTML

Como siempre, te voy a dejar al final el ejemplo completo, con todos los recursos. Listo para descargar y usar. Pero, si te interesa saber como funciona, entonces sigue leyendo que aquí van las explicaciones.

En primer lugar, todo el HTML que vamos a necesitar, es una sola etiqueta. Puedes usar la que prefieras, en mi caso voy a colocar el reloj de cuenta atrás en JavaScript dentro de un encabezado H2:

<div class="contenedor">

        <h2 id="demo"></h2> <!-- Dentro del elemento H2 vamos a actualizar el contador -->

</div>

Y eso es todo. El reloj, los cálculos del tiempo faltante y la actualización del elemento H2 la realizaremos directamente con JavaScript.

Es hora de echar a andar la cuenta atrás

En primer lugar, vamos a hacer referencia al elemento de html donde queremos mostrar el reloj. En mi caso es un H2 con el id «demo».

Y luego, vamos a definir la fecha limite. Es decir, el momento exacto en que el reloj de cuenta atrás en JavaScript debe llegar a cero. En mi caso, puse la fecha en que comienza el mundial de futbol Qatar 2022.

let demo = document.getElementById("demo");

let fecha_limite = new Date("Nov, 20, 2022, 13:00:00").getTime();

Una vez definidas estas variables, toca hacer todos los cálculos para obtener los días, horas, minutos y segundos restantes que iremos repitiendo.

La función utilizada es Math.floor(), que nos devuelve el máximo numero entero, menor o igual al numero pasado como parámetro.

var dias = Math.floor(time / (1000 * 60 * 60 * 24)); 
var horas = Math.floor((time % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
var minutos = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60)); 
var segundos = Math.floor((time % (1000 * 60)) / 1000); 

Momento de validar el reloj de cuenta atrás

Todo el código que realiza el calculo de tiempo, se ejecuta de forma reiterada utilizando el método setInterval() con un retardo de 1 segundo entre cada iteración.

Vamos a agregar una validacion, para poder frenar el reloj una vez alcanzada la fecha limite, que establecimos en la variable fecha_limite.

if (time < 0) { 
      clearInterval(x); 
      demo.innerHTML = "Empezó el mundial!"; 
}

Con un simple If verificamos si la variable time llego a cero. Y en ese caso, simplemente terminamos la iteración del intervalo y mostramos un mensaje por pantalla.

Usando la propiedad innerHTML dentro del mismo elemento donde se encuentra el reloj. en mi caso, el encabezado H2.

Descargar el código completo

Si llegaste leyendo hasta acá, ya habrás comprendido el funcionamiento del reloj de cuenta regresiva. Así que te dejo el ejemplo completo para descargar, con todo el código, los archivos de estilo y la imagen que usé de fondo de pantalla.

Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en Honeygain desde este banner y recibí 5 dolares de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona HoneyGain.