Cómo crear un temporizador de cuenta regresiva en JavaScript

Los temporizadores de cuenta regresiva son una especie de relojes virtuales que cuentan el tiempo hasta una fecha específica para marcar el inicio o el final de una ocasión especial. Se usaron principalmente en la página de destino de los nuevos sitios web próximos, pero ahora han encontrado su camino en los sitios web de comercio electrónico.

El elemento "El tiempo se agota" en las páginas de cuenta regresiva ayuda a crear urgencia para generar más conversiones en los sitios web de comercio electrónico. Los temporizadores también se pueden usar en sitios web o blogs para mostrar una cuenta regresiva para eventos especiales I.mi. aniversarios, cumpleaños, reuniones, etc. Los temporizadores de cuenta regresiva también se pueden usar para contar el tiempo hasta que esté disponible una oferta

En esta guía práctica, haremos un mostrador de tiempo en Vanilla JavaScript, en lugar de usar bibliotecas o complementos de terceros. Los beneficios de crear el reloj de cuenta regresiva en Vanilla JavaScript son los siguientes:

• El código es más ligero porque no hay dependencias.
• Mejora el rendimiento del sitio web, ya que no es necesario cargar hojas de estilo externos y scripts.

Cómo crear un temporizador de cuenta regresiva en JavaScript

Los conceptos básicos del temporizador de cuenta regresiva son los siguientes:

Establezca la fecha de finalización del temporizador

El primer paso de crear un temporizador de cuenta regresiva es establecer la fecha de finalización del temporizador. En este paso declararemos una variable y le asignaremos el valor de la fecha de finalización de nuestro temporizador utilizando el Fecha objeto:

var enddate = nueva fecha ('20 de agosto, 2021 00:00:00').consigue tiempo();

En el ejemplo anterior hemos usado el .consigue tiempo() método; Esto es porque el .consigue tiempo() El método convierte la fecha en un formato más utilizable. Devuelve el número de milisegundos que han pasado desde la medianoche del 1 de enero de 1970, lo que hace que sea más fácil realizar operaciones matemáticas en el fecha final variable.

Hacer una función de evento de tiempo

Ahora haremos un setInterval () función que ejecutará repetidamente el código dentro de él después del intervalo de tiempo especificado. Esto se debe a que queremos actualizar nuestro temporizador después de cada segundo:

var CountdownTimer = setInterval (() =>
// Todo el código de JavaScript que se menciona a continuación se encuentra dentro de esta función
, 1000);

El setInterval () La función toma el argumento de intervalo en milisegundos; Como hay 1000 milisegundos dentro de un segundo y queremos actualizar el mostrador después de cada segundo, hemos dado 1000 como intervalo de la función del evento de tiempo.

Calculando el tiempo

Ahora escribiremos código dentro del setInterval () función. En este paso, calcularemos el tiempo restante hasta la hora final del mostrador:

var ahora = nueva fecha ().consigue tiempo();
var restante tiempo = enddate - ahora;

Ahora el valor del tiempo restante presente en la variable tiempo restante está en forma de milisegundos, pero queremos mostrar el número restante de días, horas, minutos y segundos, por lo que tendremos que convertir el número de milisegundos en nuestros períodos de tiempo requeridos:

const Second = 1000;
const minuto = segundo * 60;
constante hora = minuto * 60;
Const Day = Hour * 24;
daysleft = matemáticas.trunc (tiempo restante / día);
Hoursleft = matemáticas.trunc (( % de tiempo restante) / hora);
Minutesleft = matemáticas.trunc (( % de tiempo restante) / minuto);
SecondSleft = matemáticas.trunc ((restante % minuto) / segundo);

Hay 1,000 milisegundos dentro de un segundo, 60,000 milisegundos (1000*60) dentro de un minuto, 3,600,000 milisegundos (1000*60*60) en una hora y 86,400,000 milisegundos (1000*60*60*24) en un día.

Hemos calculado los días dejados dividiendo la cantidad de milisegundos presentes en tiempo restante por la cantidad de milisegundos en un día; Si quedan 86,400,000 milisegundos, entonces Días restantes será igual a uno (86,400,000/86,400,000), si quedan 172,800,000 milisegundos entonces Días restantes será igual a 2 (172,800,000/86,400,000) y así sucesivamente. El número devuelto por la operación (restante tiempo / día) será con mayor frecuencia un número decimal, pero solo necesitamos la parte del número entero, por lo que hemos usado el Matemáticas.trun () método.

Para calcular el horas restantes Primero nos deshicimos de los días usando el operador de módulo. Luego calculamos las horas desde el tiempo restante. Podemos calcular el minutos restantes y segundo variables de manera similar.

Mostrando el temporizador

En este paso agregaremos algún código (etiquetas) al cuerpo HTML; Entonces accederemos a esas etiquetas en el setInterval () función y modificarlos para mostrar el temporizador en la página web:

Dentro de setInterval () función:

documento.QuerySelector ('##días').innerhtml = daysleft + 'días';
documento.QuerySelector ('##horas').innerhtml = Soursleft + 'Hours';
documento.QuerySelector ('##minutos').innerhtml = minutesleft + 'minutos';
documento.QuerySelector ('#segundos').innerhtml = SecondSleft + 'Seconds';

Ahora agregaremos más código en el setInterval () función que se ejecutará en caso de que el temporizador esté activo:

Si (restante tiempo <= 0)
documento.escribir ('tiempo arriba!');

En todo el archivo HTML para un temporizador de cuenta regresiva, debería verse algo así:

Se ha realizado con éxito un temporizador de cuenta regresiva; ahora puedes peinarlo usando CSS.

Conclusión

Los temporizadores de cuenta regresiva son utilizados por sitios web que pronto serán en vivo, así como muchos sitios web de comercio electrónico. Los sitios web de comercio electrónico usan temporizadores para persuadir al cliente para que tome decisiones rápidas. La resolución de esta publicación fue explorar la creación de un temporizador de cuenta regresiva en JavaScript.