Olá, tenho um projeto que era pra ser simples. Mas o simples não tá indo;
- O relógio sempre fica marcando meio dia. E o ponteiro de segundo não move por nada também, podeira me ajudar?
// Aguarda o carregamento completo do documento
window.addEventListener('DOMContentLoaded', () => {
const ponteiroHora = document.getElementById('ponteiro-hora');
const ponteiroMinuto = document.getElementById('ponteiro-minuto');
const ponteiroSegundo = document.getElementById('ponteiro-segundo');
function atualizarRelogio() {
const agora = new Date();
const segundos = agora.getSeconds();
const minutos = agora.getMinutes();
const horas = agora.getHour();
// Cálculo dos ângulos (360 graus divididos pelo tempo)
const grausSegundo = (segundos / 60) * 360;
const grausMinuto = ((minutos + segundos / 60) / 60) * 360;
const grausHora = ((horas % 12 + minutos / 60) / 12) * 360;
// Aplica a rotação nos elementos
ponteiroSegundo.style.transform = `rotate(${grausSegundo}deg)`;
ponteiroMinuto.style.transform = `rotate(${grausMinuto}deg)`;
ponteiroHora.style.transform = `rotate(${grausHora}deg)`;
}
// Atualiza a cada 1 segundo
setInterval(atualizarRelogio, 1000);
// Executa imediatamente para não esperar o primeiro segundo
atualizarRelogio();
});
body {
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.relogio {
width: 350px;
height: 350px;
background-color: #ffffff;
border: 10px solid #222;
border-radius: 50%;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.ponteiro {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom;
border-radius: 10px;
}
.hora {
width: 8px;
height: 70px;
background-color: #222;
margin-left: -4px; /* Metade da largura para centralizar */
}
.minuto {
width: 5px;
height: 110px;
background-color: #555;
margin-left: -2.5px;
}
.segundo {
width: 2px;
height: 140px;
background-color: #e74c3c;
margin-left: -1px;
}
.centro {
width: 14px;
height: 14px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
border: 2px solid #fff;
}
<!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 Analógico Profissional</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="relogio">
<div class="ponteiro hora" id="ponteiro-hora"></div>
<div class="ponteiro minuto" id="ponteiro-minuto"></div>
<div class="ponteiro segundo" id="ponteiro-segundo"></div>
<div class="centro"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
