Aprenda a Criar um Relógio Digital em Javascript, HTML e CSS

Atualizado em: 25 de fevereiro de 2025

foto de um notebook e um monitor, ambos com um relógio digital

Se você está começando a programar e quer aprender a criar um relógio em JavaScript, este tutorial é perfeito para você. Vamos guiá-lo através de um projeto simples, que é um relógio digital que atualiza a hora em tempo real. O JavaScript será responsável por captar a hora atual e exibi-la na tela. Com um pouco de HTML e CSS, você conseguirá criar um visual atraente para o seu relógio.

Aqui a versão interativa do código no Codepen abaixo:

See the Pen Relógio Digital – Código Fácil by Código Fácil (@CodigoFacil) on CodePen.

O Que Vamos Construir?

Neste tutorial, você aprenderá a criar um relógio digital que:

Mostra as horas, minutos e segundos em tempo real.
Atualiza a cada segundo automaticamente.
Usa HTML, CSS e JavaScript puro.

Estrutura Básica do Relógio em JavaScript, HTML e CSS

Vamos começar com a estrutura básica do projeto usando HTML para criar o layout, CSS para o estilo visual e JavaScript para a funcionalidade do relógio.

1. HTML para Estruturar o Relógio

O HTML será simples e direto. Criamos uma div com o id relogio, que servirá como o contêiner onde o JavaScript atualizará o horário.

HTML

<!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 Digital</title>
</head>
<body>
    <div id="relogio"></div>
</body>
</html>

2. CSS para Estilizar o Relógio

Agora que já temos a estrutura do HTML, vamos adicionar um pouco de estilo com CSS para tornar o relógio mais visualmente atraente. A ideia aqui é centralizar o relógio na tela, adicionar uma fonte grande e bordas arredondadas para destacar o elemento.

CSS

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    #relogio {
        font-size: 4em;
        font-weight: bold;
        color: #333;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
</style>

3. JavaScript para Atualizar o Relógio

Agora, o coração do projeto é o JavaScript. A função atualizarRelogio captura a hora atual usando o objeto Date, formata as horas, minutos e segundos com dois dígitos, e atualiza o conteúdo da div com o id relogio.

JavaScript

<script>
    function atualizarRelogio() {
        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');

        const horarioFormatado = `${horas}:${minutos}:${segundos}`;
        document.getElementById('relogio').textContent = horarioFormatado;
    }

    // Atualiza o relógio a cada segundo
    setInterval(atualizarRelogio, 1000);

    // Chama a função uma vez para evitar o atraso inicial
    atualizarRelogio();
</script>

Explicação Passo a Passo

Captura da Hora Atual: Usamos o objeto Date em JavaScript para capturar o horário atual. Ele nos dá a hora, minuto e segundo do sistema.
Formatação com padStart: A função padStart(2, '0') é usada para garantir que, caso o valor da hora, minuto ou segundo tenha apenas um dígito, ele seja preenchido com um zero à esquerda. Isso é importante para manter a estética do relógio.
Atualização Dinâmica: Utilizamos a função setInterval para garantir que o relógio seja atualizado automaticamente a cada segundo (1000 milissegundos).
Exibição do Relógio: A cada segundo, o conteúdo da div com id relogio é atualizado com o horário formatado.

Dicas para Melhorar o Projeto

Adicionar Data: Você pode expandir o projeto para exibir também a data atual, incluindo dia, mês e ano.
Estilos Personalizados: Experimente diferentes fontes, cores e tamanhos para criar um design que se adeque ao seu gosto.
Exibir Fuso Horário: Adicione a exibição do fuso horário para tornar o relógio mais completo.

Conclusão: Relógio em JavaScript

Criar um relógio em JavaScript é um excelente exercício para iniciantes. O projeto combina habilidades de HTML, CSS e JavaScript, proporcionando um aprendizado prático e recompensador. Além disso, você pode usar esse projeto como base para outros experimentos, como cronômetros e temporizadores.

Esse relógio digital pode ser facilmente integrado em outros projetos web e ainda pode ser uma peça fundamental no desenvolvimento de interfaces dinâmicas.

Aproveite e continue explorando as infinitas possibilidades com JavaScript!