Digital Clock made using simple JavaScript and setting background images randomly using jQuery.
You can pin ๐ this site in your browser, that will serve as Aesthetic Clock + Wallpaper + Daily Quotes(coming soon!) Site.
- HTML
- CSS
- JavaScript
- Math.floor(),
- Math.random(),
- JS Date object,
- getHours(), getMinutes(), getSeconds(),
- string.prototype.padStar().
-
code ๐
const randomRng = Math.floor(Math.random() * 1000) + 0;
document.body.style.cssText =
background-image: url(https://picsum.photos/seed/${randomRng}/1920/1080)
;function clock() { const d = new Date();
let h = d.getHours().toString().padStart(2, '0');
let m = d.getMinutes().toString().padStart(2, '0');
let s = d.getSeconds().toString().padStart(2, '0'); let session='PM'; if(h>=12){ h = (h-12).toString().padStart(2, '0'); session='PM'; } else{ session='AM'; } document.querySelector('time').innerHTML = h + ':' + m + ':' + s; document.querySelector('.ampm').innerHTML = session; } setInterval(clock, 1000);