Advertisement
jcunews

24HoursAnalogClock.html

Mar 25th, 2022
897
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <!--
  5.  24-Hours Analog Clock, March 2022.
  6.  https://www.reddit.com/user/jcunews1
  7.  https://pastebin.com/u/jcunews
  8.  https://greasyfork.org/en/users/85671-jcunews
  9.  -->
  10.   <meta charset=utf-8 />
  11.   <meta http-equiv="x-ua-compatible" content="IE=9" />
  12.   <title>24-Hours Analog Clock</title>
  13.   <style>
  14.     body{margin:0;height:100vh}
  15.   </style>
  16. </head>
  17. <body>
  18.   <script>
  19. //minute/second markers
  20. for (i = 0; i < 30; i++) {
  21.  (e = document.createElement("DIV")).style =
  22.    "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%) rotate(" + (i / 30 * 180) + "deg);width:3px;height:100vh;background:#000";
  23.  document.body.appendChild(e);
  24. }
  25. (e = document.createElement("DIV")).style =
  26.  "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%);border-radius:50%;width:90vh;height:90vh;background:#fff";
  27. document.body.appendChild(e);
  28.  
  29. //hour markers
  30. for (i = 0; i < 12; i++) {
  31.  (e = document.createElement("DIV")).style =
  32.    "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%) rotate(" + (i / 12 * 180) + "deg);width:3px;height:100vh;background:#500";
  33.  document.body.appendChild(e);
  34. }
  35. (e = document.createElement("DIV")).style =
  36.  "position:absolute;left:50vw;top:50vh;transform:translate(-50%, -50%);border-radius:50%;width:85vh;height:85vh;background:#fff";
  37. document.body.appendChild(e);
  38.  
  39. //text clock
  40. (txt = document.createElement("DIV")).style =
  41.  "position:absolute;left:50vw;top:60vh;transform:translateX(-50%);padding:.15em .2em 0 .2em;background:#ddd;font:24pt/normal 'Lucida Console'";
  42. document.body.appendChild(txt);
  43.  
  44. //hour hand
  45. (hour = document.createElement("DIV")).style =
  46.  "position:absolute;left:50vw;top:50vh;transform-origin:50% 100%;transform:translate(-50%, -100%) rotate(0deg);width:5px;height:27vh;background:#900";
  47. document.body.appendChild(hour);
  48.  
  49. //minute hand
  50. (min = document.createElement("DIV")).style =
  51.  "position:absolute;left:50vw;top:50vh;transform-origin:50% 100%;transform:translate(-50%, -100%) rotate(0deg);width:5px;height:37vh;background:#009";
  52. document.body.appendChild(min);
  53.  
  54. //second hand
  55. (sec = document.createElement("DIV")).style =
  56.  "position:absolute;left:50vw;top:50vh;transform-origin:50% 100%;transform:translate(-50%, -100%) rotate(0deg);width:5px;height:47vh;background:#070";
  57. document.body.appendChild(sec);
  58.  
  59. //start
  60. setInterval((t, m) => {
  61.   t = new Date;
  62.   txt.textContent = ("0" + t.getHours()).substr(-2) + ":" +
  63.     ("0" + t.getMinutes()).substr(-2) + ":" +
  64.     ("0" + t.getSeconds()).substr(-2)
  65.   hour.style.transform = `translate(-50%, -100%) rotate(${(t.getHours() * 60 + t.getMinutes()) / 1440 * 360}deg)`
  66.   min.style.transform = `translate(-50%, -100%) rotate(${(t.getMinutes() * 60 + t.getSeconds()) / 3600 * 360}deg)`
  67.   sec.style.transform = `translate(-50%, -100%) rotate(${(t.getSeconds() * 1000 + t.getMilliseconds()) / 60000 * 360}deg)`
  68. }, 100);
  69.   </script>
  70. </body>
  71. </html>
  72.  
Advertisement
RAW Paste Data Copied
Advertisement