AI game creator

Click here for free DL of the app version that can save data.

No:14055

←

Prev Next

→

Analog Clock
Developer User6030｜Date and time 23/8/30 22:36:31
Build time 16.678 sec｜Game capacity 1.92KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Analog Clock</title>
  <style>
    body {
      background-color: #f5f5f5;
    }

.clock {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
      width: 400px;
      background-color: #fff;
      border: 2px solid #333;
      border-radius: 50%;
    }

.hour-hand {
      position: absolute;
      height: 130px;
      width: 6px;
      background-color: #333;
      transform-origin: bottom center;
      transform: rotate(0deg);
    }

.minute-hand {
      position: absolute;
      height: 180px;
      width: 4px;
      background-color: #555;
      transform-origin: bottom center;
      transform: rotate(0deg);
    }

.second-hand {
      position: absolute;
      height: 200px;
      width: 2px;
      background-color: #777;
      transform-origin: bottom center;
      transform: rotate(0deg);
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>

const now = new Date();
      const seconds = now.getSeconds();
      const minutes = now.getMinutes();
      const hours = now.getHours();

const secondsRotation = (seconds / 60) * 360;
      const minutesRotation = ((minutes * 60 + seconds) / 3600) * 360;
      const hoursRotation = ((hours * 60 + minutes) / 720) * 360;

secondHand.style.transform = `rotate(${secondsRotation}deg)`;
      minuteHand.style.transform = `rotate(${minutesRotation}deg)`;
      hourHand.style.transform = `rotate(${hoursRotation}deg)`;
    }

setInterval(updateClock, 1000);
  </script>
</body>
</html>