Como Criar um Relógio Digital em JavaScript (html & css)

Deixe um comentário / Classic, CSS, HTML, Iniciante, JS / Por Anderson Kemper

Adicionar um relógio digital em tempo real ao seu projeto pode ser uma forma interessante de mostrar habilidades com JavaScript e melhorar a interação com o usuário. Abaixo, vamos aprender a construir um relógio digital simples, porém estiloso, utilizando HTML, CSS e JavaScript.

Estrutura HTML

Primeiro, criamos a estrutura básica em HTML. Dentro do body, adicionamos uma div onde o relógio será exibido.

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="clock" id="clock"></div>

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

Estilo CSS

Em seguida, aplicamos um estilo moderno ao relógio usando CSS. A ideia é torná-lo visualmente atraente e destacá-lo na página.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #2c3e50;
    font-family: 'Courier New', Courier, monospace;
}

.clock {
    font-size: 80px;
    color: #ecf0f1;
    background-color: #34495e;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

JavaScript para Atualização em Tempo Real

Agora, a parte do JavaScript. Usamos a função setInterval para atualizar o relógio a cada segundo. A hora é formatada para ter sempre dois dígitos, garantindo que a exibição seja consistente.

function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    const timeString = `${hours}:${minutes}:${seconds}`;
    document.getElementById('clock').textContent = timeString;
}

setInterval(updateClock, 1000);
updateClock();  // Call once immediately to avoid delay

Explicação do Código

HTML: Define a estrutura básica e cria um espaço (div) para o relógio.
CSS: Estiliza o relógio com cores, sombra e uma fonte moderna, garantindo que ele se destaque na página.
JavaScript: Atualiza a hora a cada segundo, utilizando o método setInterval e formatando a hora para garantir que sempre tenha dois dígitos.

Esse código cria um relógio digital funcional, simples e esteticamente agradável, que pode ser facilmente integrado em qualquer projeto. Você pode personalizar o estilo ou adicionar novas funcionalidades, como a exibição de data ou ajustes de fuso horário, conforme necessário.