Reloj de cuenta atrás JavaScript

[et_pb_section fb_built=»1″ admin_label=»section» _builder_version=»3.22″ global_colors_info=»{}»][et_pb_row admin_label=»row» _builder_version=»3.25″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»3.25″ custom_padding=»|||» global_colors_info=»{}» custom_padding__hover=»|||»][et_pb_code admin_label=»Código sidebar» _builder_version=»4.14.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_code][et_pb_code admin_label=»Código codepen.io» _builder_version=»4.14.7″ _module_preset=»default» hover_enabled=»0″ global_colors_info=»{}» sticky_enabled=»0″]

See the Pen reloj cuenta atrás js by Javier Rodríguez (@qe2) on CodePen.

[/et_pb_code][et_pb_text admin_label=»Text» _builder_version=»4.14.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat» hover_enabled=»0″ global_colors_info=»{}» sticky_enabled=»0″]

Se presenta un reloj digital creado en modo de cuenta atrás. Este retrocede en el tiempo hasta llegar al tiempo 0, el cual definiremos manualmente y también automáticamente. Ejemplos de uso de este reloj pueden ser anunciar al usuario web el momento de la finalización de una oferta importante, el tiempo que falta para el lanzamiento de un producto, o la apertura del sitio/e-commerce, como una página de «pŕoxima apertura».

El ejemplo está dividido en dos partes. Ambas partes están creadas con JavaScript puro (también llamado Vanilla JavaScript).

La primera parte está creada para contener lo básico. Debe introducirse manualmente la fecha de finalización del intervalo de tiempo. Para muchas situaciones, conocer esta base de código será suficiente.

El segundo ejemplo, más elaborado, genera automáticamente un nuevo punto en el tiempo futuro, una vez finalizado el tiempo de descuento, en este ejemplo una semana. Así, la cuenta atrás se reinicia y ejecuta continuamente, sin la intervención del desarrollador. Tiene, además, estilos CSS que le dan una apariencia más estilizada y lo hacen responsive (adaptado a móviles).

Detalle del código

var fechaCuentaAtras = new Date("January 31, 2022 16:27:0").getTime();

Se declara la variable fechaCuentaAtras, y a esta se le asigna un objeto Date de JavaScript. Ver en este link de MDN otros formatos posibles para asignarle una fecha.

var x = setInterval( function() { ...

Esta línea juega un papel importante. setInterval() actúa de forma similar a bucle while, for, etc. Ejecuta periódicamente la función o fragmento en su interior. En este caso, lo que ejecuta repetidamente es function().

Pero la función function() es solo el primer parámetro de setInterval(). Observar al final de este, donde el número 1000 es el segundo parámetro, y le indica que deber ejecutar function() cada mil milisegundos (un segundo).

Las siguientes líneas quedan explicadas en sus comentarios del propio código, hasta llegar al cálculo de tiempo para días, horas, minutos y segundos:

var dias = Math.floor(distancia / (1000 * 60 * 60 * 24));

…donde distancia es una variable que contiene el número de milisegundos que quedan para llegar a fechaCuentaAtras. En esta línea, dentro de Math.floor() se realiza el siguiente cálculo:

• 1000 (milisegundos/segundo) x 60 (segundos/minuto) x 60 (minutos/hora) x 24 (horas/día) =  número de milisegundos que tiene un día = 86 400 000
• Divide distancia entre el resultado del cálculo anterior (86 400 000) para obtener el número de días.
• Sin embargo, es necesario que el resultado sea un número entero. De esto se encarga Math.floor(), el cual devuelve y asigna a la variable dias, el máximo entero menor o igual a un número. Se podría decir de otro modo, que Math.floor() realiza un truncamiento eliminando los decimales, o que redondea a la baja.

Desactivar el reloj

Hasta aquí coinciden las versiones 1 y 2, y en adelante la versión 2 introduce cambios. Podemos desactivar el reloj y además ocultarlo completamente sin tener que borrar todo el código. Para ello, nos desplazamos a la primera línea de todas, donde se ajusta la fecha, y sustituimos la fecha por un 0:

var fechaCuentaAtras = new Date(0).getTime();

Una vez hecho, en el siguiente código, más adelante en Demo2, verifica y encuentra este cero (0), y determina que si está, debe escribirse una cadena vacía («») en el elemento HTML con id=»demo2″, y justo después, detener el bucle con clearInterval(y):

if (fechaCuentaAtras == 0) {
document.getElementById(«demo2»).innerHTML = «»;
clearInterval(y);
}

Al escribir una cadena vacía, en la capa <div> demo2, el reloj queda completamente oculto.

clearInterval() cancela la ejecución en bucle que se inició con setInterval(), deteniendo el script.

En la Demo1 clearInterval() detiene el reloj cuando simplemente finaliza la cuenta atrás. En la Demo2, sin embargo, la fecha de cuenta atrás vuelve a inicializarse. Eso se consigue sumando sucesivamente 7 días exactos (1000*60*60*24*7 milisegundos) a cuenta atrás, tantas veces como sea necesario hasta llegar a una fecha posterior a la actual (el día en el que estemos, guardado en la variable ahora).

while ( (fechaCuentaAtras – ahora) < 0) {
fechaCuentaAtras += 1000*60*60*24*7;
}

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]