<section class="clock"> <div class="dials"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="hour hand"></div> <div class="minute hand"></div> <div class="second hand"></div> </section>
.clock { position: relative; width: 300px; height: 300px; border-radius: 50%; border: solid 2px silver; } .clock::after { content: ""; position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); border-radius: 50%; width: 16px; height: 16px; background-color: silver; } .dials { position: relative; width: 100%; height: 100%; } .dials > div { position: absolute; top: 0; left: calc(50% - 3px); width: 6px; height: 50%; transform-origin: bottom; } .dials > div::after { position: absolute; top: 0; content: ""; width: 6px; height: 15px; background-color: silver; } .dials div:nth-child(1) { transform: rotate(30deg); } .dials div:nth-child(2) { transform: rotate(60deg); } .dials div:nth-child(3) { transform: rotate(90deg); } .dials div:nth-child(4) { transform: rotate(120deg); } .dials div:nth-child(5) { transform: rotate(150deg); } .dials div:nth-child(6) { transform: rotate(180deg); } .dials div:nth-child(7) { transform: rotate(210deg); } .dials div:nth-child(8) { transform: rotate(240deg); } .dials div:nth-child(9) { transform: rotate(270deg); } .dials div:nth-child(10) { transform: rotate(300deg); } .dials div:nth-child(11) { transform: rotate(330deg); } .dials div:nth-child(12) { transform: rotate(360deg); } .hand { position: absolute; bottom: 50%; left: 50%; background-color: silver; transform-origin: 50% 100%; } .hour.hand { width: 6px; height: 90px; } .minute.hand { width: 4px; height: 140px; } .second.hand { width: 2px; height: 130px; }
const hour = document.querySelector(".hour.hand"); const minute = document.querySelector(".minute.hand"); const second = document.querySelector(".second.hand"); setInterval(() => { const date = new Date(); const s = (360 / 60) * date.getSeconds(); const m = (360 / 60) * date.getMinutes() + (s / 60); const h = (360 / 24) * date.getHours() + (m / 24); second.style.transform = `rotate(${s}deg)`; minute.style.transform = `rotate(${m}deg)`; hour.style.transform = `rotate(${h}deg)`; }, 1000);