🕐 JS Analog Clock

A pure JavaScript, HTML, and CSS analog clock that displays the current time with smoothly sweeping hour, minute, and second hands — no jarring jumps, no external libraries.

Demo

Live Demo: https://muhammadabdullah81.github.io/JavaScript-Analog-Clock/

The clock face renders three hands (hour, minute, second) rotated using CSS transform: rotate(), continuously updated in real time to reflect the user's system clock.

Features

• 🎯 Real-time analog clock synced to the system clock
• 🌊 Smooth, continuous hand movement (no ticking/jumping) via millisecond-level precision
• 🎨 Custom clock face background (SVG) with a dark bezel border
• 🪶 Zero dependencies — plain HTML/CSS/JS

Project Structure

.
├── index.html          # Clock markup
├── style.css             # Clock face and hand styling
├── app.js                 # Time calculation and rotation logic
└── images/
    └── bg.svg           # Clock face background (numbers/ticks)

How It Works

Angle Calculation

Each hand's rotation angle is calculated in degrees, where a full circle is 360°:

Hand	Full rotation covers	Base angle formula	"Drag" from faster hand
Hour	12 hours	30 * hour	+ 0.5 * minutes
Minute	60 minutes	6 * minutes	+ 0.1 * seconds
Second	60 seconds	6 * seconds	+ 0.006 * milliseconds

The "drag" terms are what make the hands sweep smoothly instead of jumping instantly at each unit boundary — each hand borrows a fractional amount of rotation from the faster hand below it (e.g., the hour hand creeps forward gradually as minutes pass, rather than snapping only on the hour).

Rendering

• setTime() reads the current time via new Date(), computes the three angles, and applies them as inline transform: rotate(...) styles on the .hour, .minute, and .second elements.
• setInterval(setTime, 1) re-runs this calculation as frequently as the browser allows (effectively capped by the browser's minimum timer resolution, typically ~4ms+ in modern browsers) to keep the sweep looking continuous.
• setTime() is also called once immediately on load so the clock doesn't wait for the first interval tick to display the correct time.

Styling Notes

• Each hand is a <div> positioned absolutely at the center of the clock face, anchored at the bottom (transform-origin: bottom) so rotations pivot around the clock's center.
• The .hour, .minute, and .second classes control each hand's length and thickness; the second hand is thinner and solid white, while the hour/minute hands are outlined only.

Getting Started

1. Clone or download this project.
2. Ensure images/bg.svg exists in the project (or supply your own clock face background).
3. Open index.html directly in your browser — no build step or server required.

Possible Improvements

• Throttle setInterval to something like 16ms (≈60fps) instead of 1ms, since browsers already clamp minimum intervals and running it at true 1ms wastes CPU cycles for no visible benefit.
• Add digital time display alongside the analog face.
• Support multiple time zones.
• Add a light/dark theme toggle.

License

Free to use and modify for personal or educational projects.