Temporizador de cuenta regresiva en JavaScript

Establecer la etiqueta HTML para el temporizador

En el código anterior, la etiqueta <h1> contiene la pantalla del temporizador. Utilice este código en el HTML de su página web. Se requiere el id="count-down-timer" ya que se accede al elemento en JavaScript con el id de count-down-timer para cambiar el texto del elemento dinámicamente en tiempo de ejecución.

<h1 class="text-center" id="count-down-timer"></h1>

Establecer el valor del temporizador

Una vez que la etiqueta está en su lugar, el siguiente paso es establecer el valor del tiempo de conteo. Por lo general, las páginas web utilizan un tiempo codificado integrado en su código, que no se puede personalizar. Puede configurar el temporizador en el método window.onload en time_minutes y time_seconds. Por ejemplo, si desea configurar un temporizador para un minuto y medio, configure el código de la siguiente manera:

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

Si desea establecer 3 minutos, configure time_minutes = 3 y deje time_seconds = 0. Ahora, una vez que ejecute su código o vuelva a cargar su HTML, puede obtener la salida actualizada.

La ejecución comienza con la función window.onload. Toma el valor del temporizador establecido por usted y calcula la duración total del tiempo en segundos.

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

let duration = time_minutes * 60 + time_seconds;

document.querySelector('#count-down-timer') obtiene el nodo HTML del elemento. Este nodo se utilizará para actualizar el valor del temporizador.

element = document.querySelector('#count-down-timer');

Una vez que el elemento está disponible, se inicializa con el valor establecido por nosotros. Por ejemplo, en el código, es 1 minuto y 30 segundos. Está configurado en un formato acolchado.

function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

console.log(paddedFormat(3));
console.log(paddedFormat(12));

Producción:

03
12

La función paddedFormat(num) devuelve el número rellenado. Para los minutos y los segundos, los valores de un solo dígito se rellenan con un prefijo 0. Por ejemplo, 2 minutos y 5 segundos se rellenan con 02 y 05, respectivamente.

element.textContent =
    `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

A continuación, invocamos la función startCountDown(--duration, element) pasando duration en segundos, y el nodo HTML del elemento de visualización. Ahora mostramos el valor 01:30. Por lo tanto, necesitamos que el temporizador comience a partir de 01:29. Esa es la razón por la que usamos el operador unario decremento con duración --duration.

startCountDown(--duration, element);

startCountDown(duration, element) es el corazón del temporizador. En esto, usamos la función setInterval(function(){}, 1000) de JavaScript para ejecutar el temporizador después de cada segundo (1000 milisegundos) hasta que se borre o se elimine usando clearInterval(countInterval).

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

Dentro de la función setinterval(), se calculan los minutos y segundos para la visualización. Los minutos se calculan dividiendo el valor de remainingSeconds por 60 para dar el valor de los minutos y tomando su parte entera.

let secondsRemaining = 89;
let min = parseInt(secondsRemaining / 60);
let sec = parseInt(secondsRemaining % 60);

console.log(secondsRemaining + 'seconds');
console.log(min);
console.log(sec);

Producción:

89  // Equivalent to 1 min and 29 seconds
1
29

A continuación, mostramos los minutos y segundos calculados para la página web configurando el texto usando el atributo textContent del elemento de nodo HTML.

element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

A continuación, el valor se reduce para el secondsRemaining, y la función del temporizador se ejecuta cada segundo con el método setInterval().

Finalmente, una vez que el valor de secondsRemaining es 0, se activa el clearInterval(countInterval) para detener el temporizador. También asegura que el temporizador no se reinicia o entra en valores negativos.