Criar um Relógio Digital Personalizado com HTML, CSS e JavaScript

Introdução:

Você já se perguntou como os relógios digitais funcionam em sites ou aplicativos? Bem, a resposta é HTML, CSS e JavaScript! Neste tutorial, vou mostrar a você como criar um relógio digital personalizado para o seu site ou projeto, usando essas tecnologias de front-end. Vamos começar!

Passo 1: Estrutura HTML

O primeiro passo é configurar a estrutura HTML básica para o seu relógio digital. Você precisará de uma estrutura simples, incluindo um elemento <div> para o relógio. Aqui está um exemplo:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”styles.css”>
<title>Relógio Digital</title>
</head>
<body>
<div class=”clock”>
<div class=”time”>
<span id=”hours”>00</span>:
<span id=”minutes”>00</span>:
<span id=”seconds”>00</span>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>

Passo 2: Estilização com CSS

Agora, vamos estilizar o relógio digital usando CSS. Crie um arquivo styles.css e adicione estilos para o relógio e seus elementos filhos. Aqui está um exemplo básico:

body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #333;
color: #fff;
margin: 0;
padding: 0;
}

.clock {
font-size: 2rem;
padding: 20px;
border: 2px solid #fff;
border-radius: 5px;
display: inline-block;
}

.time {
display: inline-block;
}

span {
padding: 0.2em;
}

Passo 3: JavaScript para Atualização

Agora, a parte divertida! Vamos usar JavaScript para atualizar o relógio a cada segundo. Crie um arquivo script.js e adicione o seguinte código:

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

document.getElementById(‘hours’).textContent = hours;
document.getElementById(‘minutes’).textContent = minutes;
document.getElementById(‘seconds’).textContent = seconds;
}

setInterval(updateClock, 1000);
updateClock();

Curioso para ver o resultado final do relógio digital que criamos? Não perca tempo! Confira-o agora em ação no meu CodePen A Pen by henrique (codepen.io). Veja como a programação ganha vida e aproveite para explorar outros projetos interessantes enquanto estiver lá. A diversão está apenas a um clique de distância!

Publicações em alta

Gostando do Conteúdo? Compartilhe!

Edit Template

© 2023 Criador por Henrique Bertulino

Sejam todos bem-vindos ao meu blog, onde me sinto tão sortuda por ter a oportunidade de me conectar com pessoas incríveis, brilhantes e inteligentes como você. É uma honra para mim. Muito obrigado pela visita. Espero que gostem do conteúdo do blog. 

Compartilhe!