Temporizador de contagem regressiva em JavaScript

  1. Exemplo de código de cronômetro de contagem regressiva em JavaScript
  2. Explicação do código do cronômetro de contagem regressiva em JavaScript

Este artigo fornecerá uma maneira fácil de criar um cronômetro de contagem regressiva em JavaScript.

A seguir está o código para um cronômetro para um minuto e meio.

<h1 class="text-center" id="count-down-timer"></h1>
function paddedFormat(num) {
    return num < 10 ? "0" + num : num; 
}

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);
}

window.onload = function () {
    let time_minutes = 1; // Value in minutes
    let time_seconds = 30; // Value in seconds

    let duration = time_minutes * 60 + time_seconds;

    element = document.querySelector('#count-down-timer');
    element.textContent = `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

    startCountDown(--duration, element);
};

Exemplo de código de cronômetro 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.

Explicação do código do cronômetro de contagem regressiva em JavaScript

  • 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.