Cómo construir un temporizador de cuenta regresiva de JavaScript

Un temporizador de cuenta regresiva en una página web generalmente se usa para indicar el final o el comienzo de un evento. Se puede usar para que los clientes sepan cuándo caduca una oferta de precio, o se puede incluir en una página de destino de «próximamente» para indicar cuándo se publicará el sitio. También se puede utilizar para informar al usuario si es necesario realizar una acción pronto; por ejemplo, algunos sitios web cerrarán la sesión de los usuarios de una página si no ha habido actividad dentro de un cierto período de tiempo.

Entonces, volviendo a lo que estamos haciendo, aquí hay un vistazo al producto final. Prensa Repetición en la demostración para iniciar la función de cuenta regresiva:

¡Empecemos!

1. Crear el marcado

Usaremos dos secciones para esta demostración: una sección de temporizador y una sección de contenido. La sección del temporizador contendrá los elementos para mostrar el tiempo restante en la cuenta regresiva y la sección de contenido será el elemento que se mostrará después de que finalice la cuenta regresiva.

Teniendo en cuenta la accesibilidad

Dado que estamos construyendo una sección que tiene información que cambia constantemente, debemos considerar cómo se presentará esta información a las tecnologías de asistencia. En esta demostración, usaremos el timer rol para representar los elementos que tienen texto actualizado regularmente.

2. Estilo de las secciones

El contenedor del temporizador tiene la mayor prioridad cuando la página se carga por primera vez, por lo que lo convertiremos en un contenedor fijo que tenga el ancho y el alto completos de la página para que no se vea ningún otro contenido hasta que finalice la cuenta regresiva. También usaremos un estilo de opacidad en nuestro contenido para ocultarlo.

3. Construyendo el temporizador de cuenta regresiva

Esta es la lógica que usaremos para manejar el temporizador de cuenta regresiva:

  1. Defina un valor de cuenta regresiva basado en una fecha u hora específica
  2. Obtenga la fecha actual y reste el valor de nuestra cuenta regresiva
  3. Realiza la función de resta en un intervalo de 1s
  4. Si la fecha de la cuenta regresiva es menor o igual a la fecha actual, finalice la cuenta regresiva

Comencemos con la definición de nuestro valor de cuenta regresiva. Hay dos métodos posibles que podemos usar:

1. Definición del valor de cuenta regresiva como fecha y hora específicas

Podemos inicializar un valor de cuenta regresiva como una fecha específica usando el Date() constructor. Este método es útil para mostrar ofertas especiales o descuentos ya que el tiempo de finalización de la cuenta atrás siempre será constante. Por ejemplo, puede usar un temporizador de cuenta regresiva para mostrar una oferta de descuento hasta el Año Nuevo.

2. Definición del valor de cuenta regresiva como una unidad de tiempo agregada a la fecha actual

También podemos inicializar un temporizador de cuenta regresiva agregando tiempo a la fecha actual. Este método es útil para manejar las interacciones del temporizador basadas en el usuario. Usamos los métodos Date get y set para esto. Por ejemplo, puede configurar un temporizador para mostrar contenido 30 segundos después de que un usuario haya llegado a una página web.

También podemos modificar esta función por minutos u horas:

Una vez que hayamos configurado nuestro valor de cuenta regresiva, podemos definir nuestras constantes:

Entonces podemos trabajar en nuestra función de cuenta regresiva.

4. Creación de la función startCountdown()

Crearemos una nueva función llamada startCountdown() donde obtenemos la fecha actual y la restamos de la fecha de la cuenta regresiva. Usaremos el Date.getTime() método para convertir ambos valores en milisegundos, luego dividimos la diferencia por 1,000 para convertirlos en segundos.

Tendremos que convertir el valor de diferencia a días, horas, minutos y segundos para determinar nuestro valor de temporizador.

Podemos convertir segundos a días dividiendo la diferencia en segundos por el valor de un día (60 segundos * 60 minutos * 24 horas) y redondeando al valor más cercano.

Dado que nuestra cuenta regresiva es un valor aditivo, debemos tener en cuenta los valores anteriores al calcular. Al convertir a horas, primero necesitaremos saber cuántos días hay en la diferencia y luego convertir el resto a horas.

Por ejemplo, si tenemos 90.000 segundos, esto se convertirá en 25 horas. Sin embargo, no podemos mostrar una cuenta regresiva como 1 día y 25 horas ya que será una hora incorrecta. En cambio, primero calcularemos cuántos días hay en los segundos como 90000 / (60 * 60 * 24) = 1 día con un resto de 3600 segundos. Luego, podemos convertir este resto en horas dividiendo por (60 segundos * 60 minutos), lo que da 1 hora.

Aplicando la misma división acumulativa para minutos y segundos:

Luego pasaremos nuestros valores calculados a los elementos HTML. Teniendo en cuenta la gramática, podemos definir una función para formatear el texto de la unidad de tiempo como singular o plural en función del valor del tiempo.

Nuestro startCountdown() la función ahora se ve así:

5. Ejecutando nuestra función a intervalos

Ahora que tenemos nuestra función de cuenta regresiva, crearemos una función que ejecute la función de cuenta regresiva en un intervalo de 1s.

Primero, crearemos nuestro valor timerInterval.

Luego definimos timerInterval como una función setInterval cuando se carga la página

En este método, hemos llamado al startCountdown() funciona inmediatamente cuando se carga la página para actualizar los valores de cuenta regresiva y luego llamamos a la función de cuenta regresiva cada 1 s después de que se carga la página.

Tendremos que definir también una función para manejar cuando finalice el temporizador de cuenta regresiva. Sabremos que el cronómetro ha terminado cuando la diferencia en nuestro startCountdown función es menos de 1 segundo.

¡Esto es lo que tenemos hasta ahora!

6. Cuando termina el temporizador de cuenta regresiva

Lo que tenemos actualmente sigue contando regresivamente indefinidamente, lo que claramente no es muy útil, así que remediemos eso.

En nuestro endCountdown() función, detendremos la función de intervalo, eliminaremos el temporizador y mostraremos la sección de contenido.

Apuntaremos a la clase visible en CSS para manejar la visualización del contenido. En esta demostración, tenemos una escala de texto y una animación de cambio de color de fondo cuando se muestra el contenido que también se maneja con CSS. Por supuesto, esto es puramente con fines demostrativos: puede diseñar las cosas como desee.

Conclusión

Y, con eso, ¡hemos creado con éxito un temporizador de cuenta regresiva para mostrar contenido en una página web!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *