Cronômetro de JavaScript

Harshit Jindal 15 fevereiro 2024

JavaScript

Cronômetro de 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;
}

cronômetro javascript

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.

Autor: Harshit Jindal

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn