Temporizador de contagem regressiva em JavaScript

Defina a tag HTML para o cronômetro

No código acima, a tag <h1> mantém a exibição do cronômetro. Use este código no HTML da sua página da web. O id="count-down-timer" é necessário porque o elemento é acessado em JavaScript com o id count-down-timer para alterar o texto do elemento dinamicamente em tempo de execução.

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

Defina o valor do temporizador

Depois que a tag estiver no lugar, a próxima etapa é definir o valor do tempo de contagem. Normalmente, as páginas da web usam um tempo codificado embutido em seu código, que não é personalizável. Você pode definir o cronômetro no método window.onload em time_minutes e time_seconds. Por exemplo, se você deseja definir um cronômetro para um minuto e meio, defina o código da seguinte maneira:

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

Se você deseja definir para 3 minutos, defina time_minutes = 3 e deixe o time_seconds = 0. Agora, depois de executar o código ou recarregar o HTML, você pode obter a saída atualizada.

A execução começa com a função window.onload. Leva o valor do cronômetro definido por você e calcula a duração total do tempo em 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') obtém o nó HTML do elemento. Este nó será usado para atualizar o valor do cronômetro.

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

Uma vez que o elemento está disponível, ele inicializa com o valor definido por nós. Por exemplo, no código, é 1 minuto e 30 segundos. Ele é definido em um formato acolchoado.

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

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

Resultado:

03
12

A função paddedFormat(num) retorna o número preenchido. Para minutos e segundos, os valores de um dígito são preenchidos com um prefixo 0 para eles. Por exemplo, 2 minutos e 5 segundos são preenchidos como 02 e 05, respectivamente.

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

Em seguida, invocamos a função startCountDown(--duration, element) passando duration em segundos e o nó HTML do elemento de exibição. Exibimos o valor 01:30 agora. Portanto, precisamos que o cronômetro comece a partir de 01:29. Esta é a razão pela qual usamos o operador unário de decremento com duração --duration.

startCountDown(--duration, element);

startCountDown(duration, element) é o coração do cronômetro. Nesse caso, usamos a função setInterval(function(){}, 1000) do JavaScript para executar o cronômetro após cada segundo (1000 milissegundos) até que seja apagado ou eliminado 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 da função setinterval(), os minutos e segundos para exibição são calculados. Os minutos são calculados dividindo o valor de remainingSeconds por 60 para obter o valor do minuto e tomando a sua parte inteira.

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

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

Resultado:

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

Em seguida, exibimos os minutos e segundos calculados para a página da web, definindo o texto usando o atributo textContent do elemento de nó HTML.

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

Em seguida, o valor é reduzido para segundosRemaining e a funcionalidade do temporizador é executada a cada segundo com o método setInterval().

Finalmente, uma vez que o valor secondsRemaining é 0, o clearInterval(countInterval) é acionado para parar o cronômetro. Também garante que o cronômetro não seja reiniciado ou entre em valores negativos.