Como Criar um Relógio em Tempo Real com JavaScript
Aprenda a criar passo a passo um relógio digital que atualiza em tempo real usando JavaScript.
Como Criar um Relógio em Tempo Real com JavaScript
Criar um relógio digital em tempo real é um ótimo projeto para quem está aprendendo JavaScript e quer entender melhor como trabalhar com funções de tempo e manipulação de DOM. Neste tutorial, vamos construir um relógio digital que atualiza a cada segundo, mostrando as horas, minutos e segundos.
Passo 1: Estrutura HTML
Vamos começar criando a estrutura básica do nosso relógio digital em HTML. Crie um arquivo HTML e adicione o seguinte código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relógio em Tempo Real</title>
<style>
#relogio {
font-family: 'Arial', sans-serif;
color: #333;
font-size: 48px;
text-align: center;
margin-top: 20%;
}
</style>
</head>
<body>
<div id="relogio">00:00:00</div>
<script src="script.js"></script>
</body>
</html>
Neste exemplo, temos um div com o id relogio, onde o nosso relógio será exibido. O CSS aplicado ao div é para centralizar o texto e estilizar o relógio.
Passo 2: Função JavaScript para Atualizar o Relógio
Agora, vamos criar o script JavaScript que atualizará o relógio em tempo real. Crie um arquivo script.js e adicione o seguinte código:
function atualizarRelogio() {
const relogio = document.getElementById('relogio');
const agora = new Date();
const horas = String(agora.getHours()).padStart(2, '0');
const minutos = String(agora.getMinutes()).padStart(2, '0');
const segundos = String(agora.getSeconds()).padStart(2, '0');
relogio.textContent = `${horas}:${minutos}:${segundos}`;
}
setInterval(atualizarRelogio, 1000);
atualizarRelogio();
Explicação do Código
-
Função
atualizarRelogio: Esta função é responsável por obter a hora atual e atualizar o conteúdo dodivcom idrelogio.-
document.getElementById('relogio'): Seleciona o elemento do DOM onde o relógio será exibido. -
new Date(): Cria um novo objeto Date com a data e hora atuais. -
agora.getHours(),agora.getMinutes(),agora.getSeconds(): Obtêm as horas, minutos e segundos atuais. -
String(...).padStart(2, '0'): Garante que as horas, minutos e segundos sempre tenham dois dígitos, adicionando um zero à esquerda quando necessário. -
relogio.textContent =${horas}:${minutos}:${segundos}“: Atualiza o conteúdo dodivcom o tempo atual.
-
-
setInterval(atualizarRelogio, 1000): Chama a funçãoatualizarRelogioa cada 1000 milissegundos (1 segundo). -
atualizarRelogio(): Chama a função imediatamente para que o relógio não mostre00:00:00ao carregar a página.
Melhorando a Aparência do Relógio
Podemos melhorar a aparência do nosso relógio com algumas adições de CSS. Vamos adicionar um background e alguns estilos adicionais ao nosso div.
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
#relogio {
font-family: 'Arial', sans-serif;
color: #333;
font-size: 48px;
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
Tutorial de CSS
Caso queira aprender mais sobre CSS, confira nosso Tutorial Básico de CSS
Conclusão
Criar um relógio em tempo real com JavaScript é um excelente exercício para entender melhor como trabalhar com datas e horas, manipulação do DOM e funções de tempo. Com este conhecimento, você pode expandir para outros projetos que envolvam atualizações em tempo real, como cronômetros, contadores regressivos e muito mais.
Experimente modificar o código para adicionar novos recursos, como exibir a data atual junto com a hora, mudar as cores do relógio em intervalos específicos ou até mesmo adicionar sons. As possibilidades são infinitas, e a prática é fundamental para se tornar proficiente em JavaScript.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com a WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
![[World Premiere] Global Version Xiaomi Redmi Note 11 Smartphone Snapdragon 680 Octa Core 33W Pro Fast Charging 50MP Quad Camera](https://ae04.alicdn.com/kf/S0e244dfb44c442fb93ea34306b497b07w.jpg)
