Criando um Cronômetro em JavaScript

Um cronômetro é usado para medir a quantidade de tempo entre sua ativação e desativação. Ajuda a medir o tempo gasto para uma atividade específica.

Construiremos nosso cronômetro usando os métodos de tempo JavaScript setTimeout() e clearTimeout() que ajudam nas implementações relacionadas ao intervalo de tempo. O cronômetro possui um display e três botões. O visor mostra a hora e os três botões para iniciar, parar e zerar o cronômetro. Este tutorial ensina como construir um cronômetro em JavaScript.

Cronômetro de JavaScript

Código HTML

<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>

No código acima, usamos HTML para exibir a hora do cronômetro e criamos os três botões necessários start, stop e reset.

Código JavaScript

var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;

function tick(){
    sec++;
    if (sec >= 60) {
        sec = 0;
        min++;
        if (min >= 60) {
            min = 0;
            hrs++;
        }
    }
}
function add() {
    tick();
    h1.textContent = (hrs > 9 ? hrs : "0" + hrs) 
        	 + ":" + (min > 9 ? min : "0" + min)
       		 + ":" + (sec > 9 ? sec : "0" + sec);
    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}

timer();
start.onclick = timer;
stop.onclick = function() {
    clearTimeout(t);
}
reset.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

• Primeiro selecionamos todos os elementos HTML usando seletores para que possamos manipulá-los usando JavaScript e inicializar as variáveis ​​3 hrs, min e sec para armazenar a hora atual. Também declaramos uma variável t para armazenar setTimeout() e a apagamos chamando clearTimeout().
• Anexamos a função de temporizador ao botão start. Sempre que clicamos no botão start, a função timer() é chamada, que por sua vez chama a função add em um intervalo de 1 segundo. A função add() chama a função tick() para aumentar os segundos em 1 e ajustar os minutos e horas de acordo. Ele redefine o conteúdo do display para exibir a nova hora e, em seguida, recupera a si mesmo chamando novamente a função timer().
• Anexamos o clearTimeout() ao botão stop para parar de chamar a função add periodicamente.
• Anexamos uma função que redefine a hora como 00:00:00 e redefina o botão sec, min e hrs para 0 para reset.

Fonte: Delftstack