add clock times

zumerlab · Mar 21, 2023 · 19bd9d1 · 19bd9d1
1 parent 175aa42
commit 19bd9d1
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -9,9 +9,10 @@
   </head>
   <body>
     <div class="z-container" >
-      <div class="core items-1">
-        <hr class="item line hora" style="width: 110px; height: 5px;  border:1px solid red; --angle: -90">
-        <hr class="item line minuto" style="width: 150px; height: 2px; border:1px solid red;  --angle: -45">
+      <div class="core items-1 offset-270">
+        <hr class="item line hora" style="width: 110px; height: 5px;  border:1px solid red; --angle: 0">
+        <hr class="item line segundo" style="width: 150px; height: 2px; border:1px solid red;  --angle: 0">
+        <hr class="item line minuto" style="width: 120px; height: 3px; border:1px solid red;  --angle: 0">
       </div>
       <div class="ring-2 items-12 offset-270">
         <div class="item xs">12</div>
@@ -85,8 +86,12 @@
       </div>
     </div>
     <script>
-      var el = document.querySelector(".minuto")
-      var minuto = el.style.getPropertyValue("--angle")
+      var elh = document.querySelector(".hora")
+      var hora = elh.style.getPropertyValue("--angle")
+      var elm = document.querySelector(".minuto")
+      var minuto = elm.style.getPropertyValue("--angle")
+      var els = document.querySelector(".segundo")
+      var segundo = els.style.getPropertyValue("--angle")
       function timeToDegrees(hours, minutes, seconds) {
         const hourDegrees = (hours % 12) * 30 + (minutes / 2) + (seconds / 120);
         const minuteDegrees = minutes * 6 + (seconds / 10);
@@ -101,7 +106,9 @@
       setInterval(() => {
         const now = new Date();
         const degrees = timeToDegrees(now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
-        el.style.setProperty("--angle", degrees.second)
+        elh.style.setProperty("--angle", degrees.hour)
+        elm.style.setProperty("--angle", degrees.minute)
+        els.style.setProperty("--angle", degrees.second)
 
       }, 1000)
     </script>