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.

Dicas de JavaScript básico para iniciantes - Manipulação de DOM — Tutorial de JavaScript básico para iniciantes

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 do div com id relogio.
- 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 do div com o tempo atual.
setInterval(atualizarRelogio, 1000): Chama a função atualizarRelogio a cada 1000 milissegundos (1 segundo).
atualizarRelogio(): Chama a função imediatamente para que o relógio não mostre 00:00:00 ao 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.