Visual Analog Clock
Classic timekeeping. This script uses trigonometry and CSS3 transform: rotate() to animate clock hands in real-time.
Copy the Script
<style>
.clock {
width: 200px; height: 200px; border: 5px solid #333;
border-radius: 50%; position: relative;
}
.hand {
position: absolute; bottom: 50%; left: 50%;
transform-origin: bottom; background: #333;
}
.hour { width: 4px; height: 60px; margin-left: -2px; }
.minute { width: 3px; height: 80px; margin-left: -1.5px; }
.second { width: 2px; height: 90px; margin-left: -1px; background: red; }
</style>
<script>
function setClock() {
var d = new Date();
var s = d.getSeconds() * 6; // 360 / 60 = 6 deg per sec
var m = d.getMinutes() * 6 + s / 60;
var h = d.getHours() * 30 + m / 12; // 360 / 12 = 30 deg per hour
document.getElementById("secondHand").style.transform = "rotate(" + s + "deg)";
document.getElementById("minuteHand").style.transform = "rotate(" + m + "deg)";
document.getElementById("hourHand").style.transform = "rotate(" + h + "deg)";
}
setInterval(setClock, 1000);
</script>Frequently Asked Questions
No. The clock face and hands are created entirely with CSS and HTML divs. This makes it scalable and retina-ready.
Yes. The logic adds the minute percentage to the hour hand rotation (e.g., at 2:30, the hour hand is halfway between 2 and 3).
Yes. You can change the background color, border radius, or hand shapes in the CSS to match your site's theme.