[JS] Modelo de Relógio Digital (24 horas)
Como mostrar a hora atual em tempo real com JavaScript
⏰ Casos de Uso e Benefícios deste Modelo
- Pode exibir a hora atual em tempo real
- Aprenda os conceitos básicos de
setInterval - Atualizações automáticas sem eventos manuais
- Aplicável para blogs, lojas e ambientes educacionais
📋 Copie e use o código
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exibir hora atual</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
#clock {
font-size: 3rem;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>Hora atual</h1>
<div id="clock">--:--:--</div> <!-- O valor inicial está configurado como "--:--:--" -->
<script>
setInterval(() => {
const now = new Date();
const hh = now.getHours().toString().padStart(2, '0'); // Horas
const mm = now.getMinutes().toString().padStart(2, '0'); // Minutos
const ss = now.getSeconds().toString().padStart(2, '0'); // Segundos
document.getElementById("clock").textContent = `${hh}:${mm}:${ss}`; // Exibir hora
}, 1000); // Atualizar a cada 1 segundo
</script>
</body>
</html>
🧩 Aplicações e dicas de uso
Este modelo utiliza setInterval(() => {...}, 1000) para atualizar a hora atual a cada segundo. Como exibe a hora em tempo real sem precisar recarregar a página, é ideal para painéis digitais, displays em lojas ou qualquer situação que exija exibição contínua do horário.
Além disso, o uso de padStart(2, '0') garante que números com apenas um dígito sejam sempre exibidos com dois dígitos, mantendo o formato do relógio limpo e uniforme.
💡 Dicas para personalização
Se quiser adicionar um indicador de AM/PM, você pode usar uma lógica condicional baseada no valor de getHours(). Para também mostrar a data ou o dia da semana, use getFullYear() e getDay().
A aparência do relógio pode ser personalizada facilmente com CSS, então sinta-se à vontade para ajustar a cor de fundo ou o tamanho da fonte conforme o design do seu site.