<!DOCTYPE html><html><head> <title>Clock Test</title> <style> .clock { width: 200px; height: 200px; border: 5px solid black; border-radius: 50%; position: relative; margin: 100px auto; }
.hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; transform: translateX(-50%); }
#hour { height: 50px; width: 5px; background: black; } #minute { height: 70px; width: 3px; background: black; } #second { height: 90px; width: 2px; background: red; } </style></head><body>
<div class="clock"> <div id="hour" class="hand"></div> <div id="minute" class="hand"></div> <div id="second" class="hand"></div></div>
<script>function updateClock() { const now = new Date();
const seconds = now.getSeconds(); const minutes = now.getMinutes(); const hours = now.getHours();
const secondDeg = seconds * 6; const minuteDeg = minutes * 6; const hourDeg = (hours % 12) * 30;
document.getElementById("second").style.transform = "translateX(-50%) rotate(" + secondDeg + "deg)";
document.getElementById("minute").style.transform = "translateX(-50%) rotate(" + minuteDeg + "deg)";
document.getElementById("hour").style.transform = "translateX(-50%) rotate(" + hourDeg + "deg)";}
setInterval(updateClock, 1000);updateClock();</script>
</body></html>
