CENTRAL STACKConteúdo tech
Projetos

Projeto prático para iniciantes: como fazer um relógio digital em JavaScript

Aprenda como fazer um relógio digital em JavaScript usando HTML, CSS e JS, praticando datas, horários, DOM, funções e atualização automática da tela.

Por Equipe Central Stack06/06/20267 minGuia prático
javascriptrelógio digitalfrontendportfolio

Compartilhar

Envie este conteúdo para sua rede ou salve o link para publicar depois.

Introdução

Criar um relógio digital em JavaScript é um projeto simples, visual e muito bom para quem está começando no desenvolvimento front-end. Ele ajuda o iniciante a praticar conceitos importantes como HTML, CSS, JavaScript, manipulação do DOM, funções, datas e atualização automática da tela.

A ideia é criar uma tela com um horário digital que atualiza sozinho a cada segundo. Para isso, vamos usar o objeto Date do JavaScript para pegar a hora atual e o setInterval para atualizar o relógio continuamente.

O relógio digital também é um ótimo projeto para colocar no portfólio. Mesmo sendo simples, ele mostra que você entende interação com a página, lógica básica, organização de arquivos e atualização dinâmica de conteúdo.

Neste artigo, você vai aprender como criar um relógio digital com HTML, CSS e JavaScript puro, sem frameworks, sem bibliotecas externas e com uma estrutura fácil de entender.

O que vamos criar?

Neste projeto, vamos criar um relógio digital simples que mostra horas, minutos e segundos.

A cada segundo, o horário será atualizado automaticamente na tela. Esse comportamento é muito útil para entender como o JavaScript pode alterar elementos de uma página em tempo real.

Com esse projeto, você vai praticar:

  • estrutura HTML
  • estilização com CSS
  • funções JavaScript
  • objeto Date
  • método setInterval
  • manipulação do DOM
  • formatação de números

O resultado final será uma pequena aplicação web que pode ser aberta direto no navegador.

Arquivos do projeto

Crie uma pasta chamada relogio-digital-javascript. Dentro dela, crie três arquivos:

estrutura
relogio-digital-javascript/
├── index.html
├── style.css
└── script.js

O arquivo index.html será responsável pela estrutura do relógio. O style.css será usado para criar o visual da página. O script.js terá a lógica para buscar o horário atual e atualizar a tela.

Essa separação deixa o projeto mais organizado e ajuda quem está começando a entender a função de cada tecnologia no desenvolvimento web.

Criando o HTML do relógio digital

Agora vamos começar pela estrutura da página. No arquivo index.html, coloque o seguinte código:

index.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 em JavaScript</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="container">
    <section class="card-relogio">
      <p class="subtitulo">Horário atual</p>
      <h1 id="relogio">00:00:00</h1>
      <p class="descricao">Relógio digital feito com HTML, CSS e JavaScript</p>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>

Esse HTML cria uma página simples com um card centralizado. O elemento mais importante é o h1 com id="relogio".

index.html
<h1 id="relogio">00:00:00</h1>

O valor inicial 00:00:00 aparece apenas enquanto o JavaScript ainda não atualizou a tela. Assim que o código rodar, ele será substituído pelo horário real.

Estilizando o relógio com CSS

Agora vamos deixar o projeto mais bonito. No arquivo style.css, coloque:

style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #111827, #312e81);
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 500px;
  padding: 20px;
}

.card-relogio {
  background: rgba(31, 41, 55, 0.95);
  padding: 40px 30px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.subtitulo {
  color: #a5b4fc;
  font-size: 18px;
  margin-bottom: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#relogio {
  color: #ffffff;
  font-size: 64px;
  letter-spacing: 4px;
  margin-bottom: 16px;
}

.descricao {
  color: #d1d5db;
  font-size: 16px;
}

@media (max-width: 480px) {
  #relogio {
    font-size: 44px;
  }

  .card-relogio {
    padding: 30px 20px;
  }
}

Esse CSS cria um visual moderno, com fundo em degradê, card escuro, bordas arredondadas e horário grande no centro.

Também adicionamos uma pequena responsividade com @media, para o relógio ficar melhor em telas menores, como celulares.

Criando a lógica com JavaScript

Agora vamos criar a parte principal: o código JavaScript que atualiza o relógio. No arquivo script.js, coloque:

script.js
const relogio = document.getElementById("relogio");

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");

  relogio.textContent = `${horas}:${minutos}:${segundos}`;
}

atualizarRelogio();

setInterval(atualizarRelogio, 1000);

Esse código faz o relógio funcionar. Primeiro, pegamos o elemento do HTML:

script.js
const relogio = document.getElementById("relogio");

Depois criamos a função atualizarRelogio. Dentro dela, usamos new Date() para pegar a data e hora atual do sistema.

script.js
const agora = new Date();

Em seguida, pegamos horas, minutos e segundos:

script.js
const horas = String(agora.getHours()).padStart(2, "0");
const minutos = String(agora.getMinutes()).padStart(2, "0");
const segundos = String(agora.getSeconds()).padStart(2, "0");

O padStart(2, "0") serve para manter sempre dois dígitos. Assim, em vez de mostrar 9:5:3, o relógio mostra 09:05:03.

Depois, colocamos o horário formatado dentro do elemento da tela:

script.js
relogio.textContent = `${horas}:${minutos}:${segundos}`;

Por fim, chamamos a função uma vez para o relógio aparecer imediatamente e usamos setInterval para repetir a função a cada 1000 milissegundos, ou seja, a cada 1 segundo.

script.js
atualizarRelogio();
setInterval(atualizarRelogio, 1000);

Como testar o projeto

Para testar o relógio digital, abra o arquivo index.html no navegador.

Você pode fazer isso clicando duas vezes no arquivo ou usando a extensão Live Server no VS Code.

Se tudo estiver correto, o relógio vai aparecer no centro da tela e os segundos serão atualizados automaticamente.

Esse é um bom momento para testar pequenas alterações. Por exemplo, você pode mudar as cores no CSS, alterar o tamanho do relógio ou trocar os textos da página.

Por que esse projeto é bom para iniciantes?

O relógio digital em JavaScript é um excelente projeto para iniciantes porque ensina conceitos importantes de forma visual.

Com ele, você aprende a pegar um elemento da página, criar uma função, trabalhar com datas, formatar números e atualizar conteúdo automaticamente.

Além disso, o projeto é pequeno. Isso é bom porque o iniciante consegue terminar e entender cada parte, sem se perder em uma aplicação grande demais.

Projetos simples como relógio digital, calculadora, contador de cliques, lista de tarefas e conversor de temperatura são ótimos para praticar JavaScript para portfólio.

Como colocar esse projeto no portfólio

Se você quiser colocar esse relógio no portfólio, não publique apenas os arquivos. Escreva uma descrição simples explicando o que o projeto faz.

descricao-do-projeto
Relógio digital desenvolvido com HTML, CSS e JavaScript puro.
O projeto mostra o horário atual em tempo real e atualiza os segundos automaticamente.
Foi criado para praticar manipulação do DOM, funções, Date e setInterval.

Também é interessante colocar imagem do projeto funcionando, link para testar online, link do código no GitHub e uma breve explicação das tecnologias usadas.

Mesmo sendo simples, esse projeto mostra que você sabe criar uma pequena aplicação funcional.

Melhorias para evoluir o relógio digital

Depois que o relógio básico estiver funcionando, você pode melhorar o projeto com novas funções.

  • adicionar a data atual
  • criar modo claro e escuro
  • mostrar o dia da semana
  • permitir formato 12 horas ou 24 horas
  • criar um alarme simples
  • adicionar cronômetro
  • adicionar temporizador regressivo
  • melhorar o layout para celular

Você também pode transformar esse projeto em outros conteúdos, como relógio com data em JavaScript, cronômetro em JavaScript, timer regressivo com JavaScript ou relógio analógico com CSS e JavaScript.

Erros comuns ao criar um relógio em JavaScript

Um erro comum é esquecer de conectar o arquivo JavaScript no HTML. Confira se esta linha está antes do fechamento do body:

index.html
<script src="script.js"></script>

Outro erro é escrever o id errado. Se no HTML o elemento está com id="relogio", o JavaScript precisa buscar exatamente esse mesmo nome:

script.js
document.getElementById("relogio");

Também pode acontecer de esquecer de chamar a função antes do setInterval. Quando isso acontece, o relógio pode demorar um segundo para aparecer atualizado.

script.js
atualizarRelogio();
setInterval(atualizarRelogio, 1000);

Conclusão

Criar um relógio digital em JavaScript é um projeto simples, rápido e muito útil para quem está começando no desenvolvimento front-end.

Com esse projeto, você pratica HTML, CSS, JavaScript, funções, manipulação do DOM, objeto Date, setInterval e formatação de horário.

Além disso, o relógio digital é uma boa opção para colocar no portfólio, principalmente quando você ainda está construindo seus primeiros projetos em JavaScript.

O mais importante é não apenas copiar o código. Tente alterar o visual, adicionar a data, mudar as cores, criar um modo escuro ou transformar o projeto em um cronômetro. Quanto mais você mexe no projeto, mais aprende.

Depois desse relógio, você pode continuar praticando com outros projetos simples, como calculadora, lista de tarefas, contador de cliques, conversor de temperatura e gerador de senhas.

Fontes utilizadas