ToolActToolAct

Cronômetro online

Cronômetro online gratuito com precisão de milissegundos e cronometragem por voltas

00:00:00.000

O que é um Cronômetro Online?

Um cronômetro online é uma ferramenta de cronometragem de precisão que mede o tempo decorrido a partir de zero, normalmente com resolução de milissegundos. Diferente de um temporizador de contagem regressiva, um cronômetro responde "quanto tempo isso levou?", tornando-o ideal para treinamento esportivo, experimentos de laboratório, apresentações, culinária, sprints de programação e qualquer atividade onde você precisa rastrear a duração. Esta ferramenta funciona completamente no seu navegador usando requestAnimationFrame para atualizações suaves de exibição e performance.now() para medição de tempo monotônica, mantendo-se precisa mesmo quando o relógio do sistema é ajustado. O registro de voltas permite capturar tempos parciais com destaque da melhor/pior volta, e todos os dados permanecem locais — nada é enviado.

Como usar

Início rápido

  1. Clique em 'Iniciar' para começar — a tela mostra horas:minutos:segundos.milissegundos
  2. Clique em 'Volta' durante a execução para registrar um tempo parcial
  3. Clique em 'Pausar' para congelar a tela, depois 'Iniciar' para retomar
  4. Clique em 'Redefinir' para limpar o cronômetro e todos os registros de voltas

Dicas

  • O cronômetro usa requestAnimationFrame para atualizações de ~16ms e performance.now() para tempo preciso.
  • Mantenha a aba visível para a exibição mais suave. Abas em segundo plano podem limitar os quadros de animação.
  • Tempos de volta são codificados por cor: verde para a volta mais rápida, vermelho para a mais lenta.

Casos de uso

Treinamento esportivo e fitnessCronometre voltas de corrida, intervalos de natação, divisões de ciclismo ou circuitos de academia. Registre cada volta para ver quais foram mais rápidas ou mais lentas, ajudando a controlar o ritmo.
Experimentos de laboratório e coleta de dadosMeça tempos de reação, cronometre processos químicos ou registre intervalos de observação. A tela de milissegundos oferece a precisão necessária para cronometragem científica sem hardware especializado.
Apresentações e oratóriaCronometre seu discurso, apresentação ou ensaio de pitch. Use voltas para cronometrar seções individuais ou slides e ajuste seu ritmo.
Culinária e confeitariaAcompanhe quanto tempo cada etapa realmente leva — da preparação ao empratamento. O registro de voltas permite medir fases individuais enquanto o relógio geral continua rodando.
Sprints de programação e produtividadeCronometre sessões de código, depuração ou blocos de trabalho estilo Pomodoro. O cronômetro continua rodando até você pará-lo, dando uma medida honesta de quanto tempo uma tarefa realmente levou.

Princípio técnico

O motor do cronômetro evita completamente o padrão setInterval propenso a deriva. Em vez disso, ele usa requestAnimationFrame (rAF) para atualizações de exibição e performance.now() como fonte de tempo de referência. Quando o usuário clica em Iniciar, o motor registra o timestamp performance.now() atual como startTime. A cada quadro de animação, ele calcula elapsed = accumulated + (performance.now() - startTime), onde accumulated mantém o tempo total decorrido antes da pausa mais recente. Este modelo de duas variáveis (tempo acumulado + delta de execução) lida corretamente com ciclos de pausa/retomada sem perda de precisão sub-milissegundo. performance.now() é escolhido em vez de Date.now() porque é monotônico — nunca retrocede devido a correções NTP, alterações manuais do relógio ou transições de horário de verão. Ele também oferece resolução sub-milissegundo (tipicamente granularidade de 5 µs em navegadores modernos), tornando-o o relógio certo para cronometragem de curta duração e alta precisão. O callback rAF é limitado à taxa de atualização da tela (tipicamente 60 Hz = ~16,67 ms, até 120 Hz em telas de alta taxa de atualização), então a atualização visual é suave, mas não é a a referência — o tempo real decorrido vem do cálculo performance.now(), que é continuamente correto. O registro de voltas captura o elapsedMs atual no momento em que o botão Volta é clicado, calculando a diferença parcial em relação ao total da volta anterior. As voltas mais rápidas e mais lentas são determinadas comparando todas as diferenças de volta com Math.min/Math.max, e a tela as destaca com estilos verde e vermelho respectivamente. Todo o estado reside em hooks useState do React dentro do componente cliente, e nenhum dado é persistido ou transmitido — o cronômetro é efêmero por natureza, redefinindo-se completamente quando a página é fechada ou o botão Redefinir é pressionado.

  • performance.now() fornece timestamps monotônicos de precisão sub-milissegundo — imune a alterações do relógio do sistema.
  • requestAnimationFrame impulsiona atualizações de exibição na taxa de atualização (60–120 Hz) para renderização suave.
  • O modelo de tempo acumulado + delta de execução lida com pausa/retomada sem perda de precisão.
  • Diferenças de volta são calculadas como currentTotal - previousTotal para cronometragem parcial precisa.
  • Todo o cálculo é executado localmente no navegador; sem idas e vindas ao servidor ou uploads de dados.

Exemplos

Pista de atletismo — voltas de 400m

Volta 1 -> 01:12.450  (+01:12.450)
Volta 2 -> 02:26.180  (+01:13.730)
Volta 3 -> 03:38.910  (+01:12.730)
Volta 4 -> 04:50.320  (+01:11.410  mais rápida)

Ensaio de apresentação — cronometragem por slide

Introdução -> 00:45.200  (+00:45.200)
Problema   -> 02:10.850  (+01:25.650)
Solução    -> 04:35.120  (+02:24.270)
Demo       -> 07:10.430  (+02:35.310)
Conclusão  -> 08:25.610  (+01:15.180)
Total: 8 min 25 seg — abaixo da meta de 10 min

Treino HIIT — rastreamento de intervalos

Rodada 1 -> 00:30.150  (+00:30.150)
Descanso 1 -> 00:45.320  (+00:15.170)
Rodada 2 -> 01:15.480  (+00:30.160)
Descanso 2 -> 01:30.510  (+00:15.030)
Rodada 3 -> 02:00.670  (+00:30.160  mais lenta)
Rodada 4 -> 02:30.520  (+00:29.850  mais rápida)

Perguntas frequentes

Quão preciso é o cronômetro?

O cronômetro usa performance.now() que oferece precisão sub-milissegundo (tipicamente granularidade de 5 microssegundos). A tela é atualizada cerca de 60 vezes por segundo via requestAnimationFrame, então a atualização visual fica dentro de 16ms do valor real. Para a maioria dos propósitos práticos — esportes, culinária, apresentações — isso é mais que suficiente.

O cronômetro continua funcionando se eu mudar de aba?

Sim. O tempo decorrido é calculado a partir do timestamp performance.now() absoluto, não de ticks cumulativos. Ao voltar para a aba, a tela mostra imediatamente o tempo decorrido correto. No entanto, requestAnimationFrame é limitado em abas de segundo plano, então a atualização visual pode pausar até você retornar.

O que acontece se meu computador entrar em suspensão?

performance.now() é monotônico, mas não avança enquanto o sistema está suspenso. Quando o computador acordar, a tela do cronômetro mostrará o tempo decorrido como se o sistema nunca tivesse dormido — NÃO incluirá a duração da suspensão. Este é o comportamento correto para a maioria dos casos de uso de cronometragem.

Posso exportar ou salvar meus tempos de volta?

O cronômetro atualmente não suporta salvar ou exportar dados de voltas. Todos os registros de voltas são mantidos em memória e limpos ao redefinir o cronômetro ou fechar a página. Para registro persistente, copie manualmente os tempos exibidos ou use um rastreador de fitness dedicado.

Por que usar performance.now() em vez de Date.now()?

performance.now() é monotônico — nunca retrocede. Date.now() pode pular segundos ou minutos quando o relógio do sistema é ajustado (sincronização NTP, alteração manual, horário de verão). Para cronometragem de curta duração, performance.now() é a escolha correta. Ele também oferece resolução sub-milissegundo, diferente da resolução de milissegundos do Date.now().

Algum dado é enviado para um servidor?

Não. O cronômetro funciona completamente no seu navegador. Nenhum dado de cronometragem, registro de voltas ou informação de uso é enviado para qualquer servidor. A página funciona offline após carregada.

Qual é a diferença entre um cronômetro e um temporizador de contagem regressiva?

Um cronômetro mede o tempo decorrido para cima a partir de zero — ele responde "quanto tempo levou?". Um temporizador de contagem regressiva começa de uma duração definida e conta regressivamente até zero — ele responde "quanto tempo resta?". Esta ferramenta é um cronômetro; para funcionalidade de contagem regressiva, use a ferramenta Timer de Contagem Regressiva.