Build a Digital Sunshine Clock (Source Code)
A round clock face with rotating soft yellow sun rays that displays dynamic times using Javascript calculations.
Table of Contents
Ditch the boring digital clocks. Letโs create an animated sun clock that gently rotates and updates the physical time!
Getting The Time
Every single second, we want Javascript to fetch the systemโs current time and format it nicely using AM and PM logic.
setInterval(() => {
const d = new Date();
let h = d.getHours();
let m = d.getMinutes().toString().padStart(2, '0');
let ampm = h >= 12 ? 'PM' : 'AM';
h = h % 12 || 12; // Convert 24hr to 12hr
document.getElementById('display').innerText = `${h}:${m} ${ampm}`;
}, 1000);
Check out the continuous rotating sunbeams in the Live Demo while the clock tracks your exact system time.
