24HoursAnalogClock.html

<!doctype html>
<html>
<head>
  <!--
  24-Hours Analog Clock, March 2022.
  https://www.reddit.com/user/jcunews1
  https://pastebin.com/u/jcunews
  https://greasyfork.org/en/users/85671-jcunews
  -->
  <meta charset=utf-8 />
  <meta http-equiv="x-ua-compatible" content="IE=9" />
  <title>24-Hours Analog Clock</title>
  <style>
    body{margin:0;height:100vh}
  </style>
</head>
<body>
  <script>
//minute/second markers
for (i = 0; i < 30; i++) {
  (e = document.createElement("DIV")).style =
    "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%) rotate(" + (i / 30 * 180) + "deg);width:3px;height:100vh;background:#000";
  document.body.appendChild(e);
}
(e = document.createElement("DIV")).style =
  "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%);border-radius:50%;width:90vh;height:90vh;background:#fff";
document.body.appendChild(e);

//hour markers
for (i = 0; i < 12; i++) {
  (e = document.createElement("DIV")).style =
    "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%) rotate(" + (i / 12 * 180) + "deg);width:3px;height:100vh;background:#500";
  document.body.appendChild(e);
}
(e = document.createElement("DIV")).style =
  "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%);border-radius:50%;width:85vh;height:85vh;background:#fff";
document.body.appendChild(e);

//text clock
(txt = document.createElement("DIV")).style =
  "position:absolute;left:50vw;top:60vh;transform:translateX(-50%);padding:.15em .2em 0 .2em;background:#ddd;font:24pt/normal 'Lucida Console'";
document.body.appendChild(txt);

//hour hand
(hour = document.createElement("DIV")).style =
  "position:absolute;left:50vw;top:50vh;transform-origin:50% 100%;transform:translate(-50%, -100%) rotate(0deg);width:5px;height:27vh;background:#900";
document.body.appendChild(hour);

//minute hand
(min = document.createElement("DIV")).style =
  "position:absolute;left:50vw;top:50vh;transform-origin:50% 100%;transform:translate(-50%, -100%) rotate(0deg);width:5px;height:37vh;background:#009";
document.body.appendChild(min);

//second hand
(sec = document.createElement("DIV")).style =
  "position:absolute;left:50vw;top:50vh;transform-origin:50% 100%;transform:translate(-50%, -100%) rotate(0deg);width:5px;height:47vh;background:#070";
document.body.appendChild(sec);

//start
setInterval((t, m) => {
  t = new Date;
  txt.textContent = ("0" + t.getHours()).substr(-2) + ":" +
    ("0" + t.getMinutes()).substr(-2) + ":" +
    ("0" + t.getSeconds()).substr(-2)
  hour.style.transform = `translate(-50%, -100%) rotate(${(t.getHours() * 60 + t.getMinutes()) / 1440 * 360}deg)`
  min.style.transform = `translate(-50%, -100%) rotate(${(t.getMinutes() * 60 + t.getSeconds()) / 3600 * 360}deg)`
  sec.style.transform = `translate(-50%, -100%) rotate(${(t.getSeconds() * 1000 + t.getMilliseconds()) / 60000 * 360}deg)`
}, 100);
  </script>
</body>
</html>