Como Criar um Cronômetro Online com HTML, CSS e JavaScript

Você já quis criar um cronômetro simples e funcional para projetos pessoais ou didáticos? Neste artigo, você aprenderá como montar um cronômetro com recursos de iniciar, pausar e resetar o tempo — tudo isso usando apenas HTML, CSS e JavaScript puro.

🔧 Etapa 1: Estrutura HTML

Vamos começar criando a estrutura básica do nosso cronômetro.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CronoTime Online</title>

Aqui estamos definindo o padrão do documento HTML e o título da página.

  <style>
  <!-- (Estilo CSS, explicamos na próxima etapa) -->
  </style>
</head>
<body>
  <div class="stopwatch">
      <h2>Cronômetro</h2>
      <div id="display">00:00:00.000</div>
      <div class="buttons">
          <button id="startStop" onclick="startStop()">Iniciar</button>
          <button id="reset" onclick="reset()">Resetar</button>
      </div>
  </div>

Aqui temos:

Um título (<h2>)
Um visor (<div id="display">) que mostra o tempo
Dois botões: um para iniciar/parar e outro para resetar o cronômetro

🎨 Etapa 2: Estilizando com CSS

Agora aplicamos um estilo simples e elegante ao cronômetro.

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.stopwatch {
  width: 200px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#display {
  font-size: 24px;
  margin-bottom: 10px;
}

.buttons {
  display: flex;
  justify-content: center;
}

button {
  padding: 10px 20px;
  font-size: 18px;
  margin: 0 5px;
  border: none;
  cursor: pointer;
}

Explicando:

A classe .stopwatch centraliza o cronômetro e aplica estilo de cartão
O #display aumenta o tamanho da fonte
Os botões são estilizados para ficarem lado a lado com bom espaçamento

🧠 Etapa 3: Programando com JavaScript

Agora vem a mágica! Vamos dar vida ao cronômetro com JavaScript.

1. Variáveis principais:

let isRunning = false;
let startTime;
let elapsedTime = 0;
let interval;

isRunning: indica se o cronômetro está ativo
startTime: armazena o horário inicial
elapsedTime: guarda o tempo decorrido
interval: controla o temporizador com setInterval()

2. Função para Iniciar/Parar

function startStop() {
  if (!isRunning) {
      startTime = new Date().getTime() - elapsedTime;
      interval = setInterval(updateDisplay, 10);
      document.getElementById('startStop').textContent = 'Parar';
  } else {
      clearInterval(interval);
      elapsedTime = new Date().getTime() - startTime;
      document.getElementById('startStop').textContent = 'Iniciar';
  }
  isRunning = !isRunning;
}

Quando inicia, calcula o tempo inicial corrigido com elapsedTime
Usa setInterval() para atualizar o visor a cada 10 milissegundos
Quando para, o intervalo é limpo e o tempo decorrido é salvo

3. Função de Reset

function reset() {
  clearInterval(interval);
  document.getElementById('startStop').textContent = 'Iniciar';
  document.getElementById('display').textContent = '00:00:00.000';
  isRunning = false;
  elapsedTime = 0;
}

Cancela o setInterval
Zera o tempo mostrado e reseta as variáveis

4. Atualização do visor


function updateDisplay() {
  let currentTime = new Date().getTime() - startTime;
  let hours = Math.floor(currentTime / 3600000);
  let minutes = Math.floor((currentTime % 3600000) / 60000);
  let seconds = Math.floor((currentTime % 60000) / 1000);
  let milliseconds = Math.floor(currentTime % 1000);

  hours = String(hours).padStart(2, '0');
  minutes = String(minutes).padStart(2, '0');
  seconds = String(seconds).padStart(2, '0');
  milliseconds = String(milliseconds).padStart(3, '0');

  document.getElementById('display').textContent = `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

Calcula o tempo atual em milissegundos
Usa padStart para manter o formato 00:00:00.000
Atualiza o conteúdo do visor a cada 10 ms

✅ Código Completo Comentado

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CronoTime Online</title>
  <style>
      body {
          font-family: Arial, sans-serif;
          text-align: center;
      }

      .stopwatch {
          width: 200px;
          margin: 0 auto;
          padding: 20px;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }

      #display {
          font-size: 24px;
          margin-bottom: 10px;
      }

      .buttons {
          display: flex;
          justify-content: center;
      }

      button {
          padding: 10px 20px;
          font-size: 18px;
          margin: 0 5px;
          border: none;
          cursor: pointer;
      }
  </style>
</head>
<body>
  <div class="stopwatch">
      <h2>Cronômetro</h2>
      <div id="display">00:00:00.000</div>
      <div class="buttons">
          <button id="startStop" onclick="startStop()">Iniciar</button>
          <button id="reset" onclick="reset()">Resetar</button>
      </div>
  </div>

  <script>
      let isRunning = false; // Indica se o cronômetro está ativo
      let startTime; // Hora em que o cronômetro foi iniciado
      let elapsedTime = 0; // Tempo decorrido total
      let interval; // Identificador do intervalo

      function startStop() {
          if (!isRunning) {
              startTime = new Date().getTime() - elapsedTime; // Ajusta o início com base no tempo decorrido
              interval = setInterval(updateDisplay, 10); // Atualiza a cada 10ms
              document.getElementById('startStop').textContent = 'Parar';
          } else {
              clearInterval(interval); // Pausa o cronômetro
              elapsedTime = new Date().getTime() - startTime; // Salva o tempo decorrido
              document.getElementById('startStop').textContent = 'Iniciar';
          }
          isRunning = !isRunning;
      }

      function reset() {
          clearInterval(interval); // Para tudo
          document.getElementById('startStop').textContent = 'Iniciar'; // Reinicia texto
          document.getElementById('display').textContent = '00:00:00.000'; // Reseta visor
          isRunning = false;
          elapsedTime = 0;
      }

      function updateDisplay() {
          let currentTime = new Date().getTime() - startTime;
          let hours = Math.floor(currentTime / 3600000);
          let minutes = Math.floor((currentTime % 3600000) / 60000);
          let seconds = Math.floor((currentTime % 60000) / 1000);
          let milliseconds = Math.floor(currentTime % 1000);

          // Formatação para manter sempre dois ou três dígitos
          hours = String(hours).padStart(2, '0');
          minutes = String(minutes).padStart(2, '0');
          seconds = String(seconds).padStart(2, '0');
          milliseconds = String(milliseconds).padStart(3, '0');

          document.getElementById('display').textContent = `${hours}:${minutes}:${seconds}.${milliseconds}`;
      }
  </script>
</body>
</html>

🚀 Agora é com você!

Você pode usar esse projeto como base para cronômetros de estudo, jogos, eventos esportivos ou até integrar com APIs externas. Solte sua criatividade e compartilhe com a gente o que você criou!

#HTML #JavaScript #CSS #CronômetroOnline #DevIniciante #ProjetosWeb #ProgramaçãoParaTodos #BlogDeTecnologia #TutorialJS #FrontEnd