Reloj analógico

Crea un reloj analógico desde cero con HTML, CSS y JavaScript.

Marcado HTML

Usaremos etiquetas <div> para realizar el marcado del reloj.

<div class="clock">
    <div class="hour hand" id="hour"></div>
    <div class="minute hand" id="minute"></div>
    <div class="seconds hand" id="seconds"></div>
    <img src="https://raw.githubusercontent.com/xantosromerodev/xantosromerodev/d0ab65f78a8e7123bb9a483cdd9f01e90528990b/clock.svg" alt="Reloj Analogo" />
</div>

Estilos CSS

Las clases CSS le dan la apariencia definitiva al reloj analógico.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh; /* altura total del viewport del dispositivo */
    background: linear-gradient(to bottom, #2196f3 50%, #16191e 50%);
}

.clock {
    background: #282a35;
    height: 320px;
    width: 320px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    border-radius: 50%;
    border: 15px solid #242931;
    box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
}

img {
    position: relative;
}
.hand {
    position: absolute;
    background-color: #ffffff;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 5px;
    transform-origin: bottom;
}
.hour {
    height: 60px;
    width: 10px;
    top: 100px;
}
.minute {
    height: 80px;
    width: 5px;
    top: 80px;
}
.seconds {
    height: 90px;
    width: 3px;
    top: 70px;
    background-color: #2196f3;
}

Interacción y movimiento

JavaScript le da movimiento y dirección a las manecillas del reloj.

let hour = document.getElementById("hour");
let minute = document.getElementById("minute");
let seconds = document.getElementById("seconds");

let set_clock = setInterval(() => {
    let date_now = new Date();

    let hr = date_now.getHours();
    let min = date_now.getMinutes();
    let sec = date_now.getSeconds();

    let calc_hr = hr * 30 + min / 2;
    let calc_min = min * 6 + sec / 10;
    let calc_sec = sec * 6;

    hour.style.transform = `rotate(${calc_hr}deg)`;
    minute.style.transform = `rotate(${calc_min}deg)`;
    seconds.style.transform = `rotate(${calc_sec}deg)`;
}, 1000);

Referencias

El contenido de este artículo es original de:

• Analog Clock | HTML, CSS & Javascript Tutorial

---

"La mejor manera de aprender a programar es practicando todos los días"