Como criar um relógio digital com horas e minutos em JavaScript
A maior parte dos tutoriais que você vê na internet ensina o mesmo exemplo básico de relógio digital. Eles mostram um setTimeout dentro de um setInterval e pronto. Na prática, isso funciona no navegador, mas gera problemas sérios quando você tenta usar isso em algum projeto real. Eu já vi isso acontecer pessoalmente.
Relogio com horas e minutos funcionando de verdade
O primeiro problema é o acúmulo de erro de tempo. Se você usar setInterval com 1000ms para atualizar o relógio a cada segundo, após alguns minutos ele começa a atrasar. O navegador não garante que o callback será executado exatamente no tempo configurado. Ele pode atrasar se a aba estiver em segundo plano, se a página estiver carregada ou se houver muita coisa rodando ao mesmo tempo. Eu percebi isso quando um cliente reclamou que o relógio dele estava perdendo cerca de 3 segundos a cada hora. A solução simples foi usar Date.now() em cada iteração e calcular a diferença real em vez de confiar no contador interno do setInterval. O código funciona assim: você pega a hora atual do sistema, extrai horas e minutos usando getHours() e getMinutes(), formata com zero à esquerda quando necessário e atualiza o elemento HTML. Repete esse processo a cada segundo, mas recalcula a partir do tempo real do sistema, não do seu próprio contador.
Outro detalhe que muitos esquecem é a formatação. Horas e minutos precisam aparecer sempre com dois dígitos. 9 precisa ser 09, 5 precisa ser 05. Sem isso, o relógio fica ilegível. O método padStart(2, '0') resolve isso de forma limpa. Se você quiser algo mais eficiente, considere usar requestAnimationFrame em vez de setInterval. Ele sincroniza com a taxa de atualização do monitor e evita atualizações desnecessárias. Para um relógio que só mostra horas e minutos, isso não faz tanta diferença porque a atualização a cada segundo já é suficiente. Mas se você precisar adicionar segundos depois ou animações, requestAnimationFrame é mais adequado.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Problemas comuns que você vai enfrentar
O primeiro é o fuso horário. Se você usar getHours(), o relógio mostrará a hora local do dispositivo do usuário. Isso pode ser bom ou ruim dependendo do seu caso de uso. Para um app pessoal, faz sentido. Para um sistema corporativo onde todos precisam ver o mesmo horário, você deve usar getUTCHours() ou converter explicitamente para um fuso horário específico. O segundo problema é o desempenho. Criar e destruir elementos DOM a cada segundo gera garbage collection constante. Em dispositivos mais lentos, isso pode causar micro-travamentos. A solução é atualizar apenas o texto do elemento, nunca recriá-lo. Use textContent em vez de innerHTML e mantenha uma referência ao elemento.
O terceiro problema é a acessibilidade. Um relógio que se atualiza automaticamente precisa ser announced para leitores de tela. Adicione aria-live="polite" ao container do relógio. Assim, usuários com deficiência visual sabem que o conteúdo muda periodicamente sem serem surpreendidos. Se você precisa de um relógio com horas e minutos para algum projeto específico, o código básico é bem simples. Não precisa de biblioteca externa, não precisa de framework. O navegador já fornece tudo que você precisa através da API Date do JavaScript.
O que mais complica as coisas na prática é a manutenção. Relógios que usam setTimeout recursivo em vez de setInterval são mais fáceis de depurar, porque cada chamada é independente. Com setInterval, se algo der errado no callback, o timer continua rodando mesmo que seu estado esteja inconsistente. Eu prefiro setTimeout recursivo com cálculo de delay baseado em Date.now(). Isso elimina o acúmulo de erro e é mais previsível. Para quem quer apenas copiar e colar algo que funcione, aqui está a estrutura essencial. Crie um elemento div com id="relogio", escreva o script que lê a hora atual, formata e injeta o texto. Rode a função uma vez imediatamente para mostrar o horário sem esperar o primeiro timer. Depois configure o timer para continuar atualizando. Isso evita o delay inicial de um segundo antes da primeira atualização.
Uma observação importante: se o usuário fechar a aba e voltar alguns minutos depois, o relógio precisa corrigir o horário imediatamente. Isso acontece naturalmente com a abordagem baseada em Date.now(), mas não acontece se você apenas incrementar um contador. Esse detalhe parece insignificante, mas pode causar confusão em sistemas onde o horário precisa estar sempre correto. Para projetos mais complexos, considere usar uma biblioteca como moment.js ou date-fns se você precisar de manipulação avançada de datas. Para um simples relógio com horas e minutos, o nativo do JavaScript é suficiente e não adiciona dependência ao projeto.
