Dashboard Temp Share Shortlinks Frames API

HTMLify

Clock
Views: 288 | Author: djdj 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Analog Clock</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Courier New', Courier, monospace;
    }
    body {
      background-color: #212121;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      position: relative;
    }
    .clock {
      position: relative;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(#4a4a4a, #212121);
      border: 5px solid #888;
      box-shadow: 0 0 30px rgba(0,0,0,0.7);
    }
    .clock span {
      position: absolute;
      inset: 20px;
      text-align: center;
      transform: rotate(calc(30deg * var(--i)));
    }
    .clock span b {
      font-size: 18px;
      transform: rotate(calc(-30deg * var(--i)));
      display: inline-block;
      color: #fff;
    }
    .center-dot {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      z-index: 10;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .hand {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: bottom center;
      transform: translate(-50%, -100%) rotate(0deg);
    }
    .hand.hour {
      width: 6px;
      height: 80px;
      background: red;
      border-radius: 6px;
    }
    .hand.minute {
      width: 4px;
      height: 110px;
      background: blue;
      border-radius: 4px;
    }
    .hand.second {
      width: 2px;
      height: 130px;
      background: limegreen;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="clock">
      <div class="center-dot"></div>
      <div id="hour" class="hand hour"></div>
      <div id="minute" class="hand minute"></div>
      <div id="second" class="hand second"></div>
      <span style="--i:1"><b>1</b></span>
      <span style="--i:2"><b>2</b></span>
      <span style="--i:3"><b>3</b></span>
      <span style="--i:4"><b>4</b></span>
      <span style="--i:5"><b>5</b></span>
      <span style="--i:6"><b>6</b></span>
      <span style="--i:7"><b>7</b></span>
      <span style="--i:8"><b>8</b></span>
      <span style="--i:9"><b>9</b></span>
      <span style="--i:10"><b>10</b></span>
      <span style="--i:11"><b>11</b></span>
      <span style="--i:12"><b>12</b></span>
    </div>
  </div>
  <script>
    function updateClock() {
      const now = new Date();
      const h = now.getHours();
      const m = now.getMinutes();
      const s = now.getSeconds();

      const hDeg = (h % 12 + m / 60) * 30;
      const mDeg = (m + s / 60) * 6;
      const sDeg = s * 6;

      document.getElementById("hour").style.transform = `translate(-50%, -100%) rotate(${hDeg}deg)`;
      document.getElementById("minute").style.transform = `translate(-50%, -100%) rotate(${mDeg}deg)`;
      document.getElementById("second").style.transform = `translate(-50%, -100%) rotate(${sDeg}deg)`;
    }
    setInterval(updateClock, 1000);
    updateClock();
  </script>
</body>
</html>

Share this file: