analog clock spirited away no face's game

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

No:20845

111

←

Prev Next

→

analog clock spirited away no face
Developer User3589｜Date and time 23/10/11 9:04:33
Build time 88.595 sec｜Game capacity 2.057KB｜

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>

#clock {
      width: 300px;
      height: 300px;
      border: 16px solid #fff;
      border-radius: 50%;
      position: relative;
    }

#hour-hand,
    #minute-hand,
    #second-hand {
      width: 6px;
      background-color: #000;
      position: absolute;
      transform-origin: bottom center;
    }

#hour-hand {
      height: 80px;
      top: 90px;
    }

#minute-hand {
      height: 120px;
      top: 70px;
    }

#second-hand {
      height: 140px;
      top: 50px;
    }

#clock-center {
      width: 12px;
      height: 12px;
      background-color: #000;
      border-radius: 50%;
      position: absolute;
      top: 140px;
      left: 144px;
    }
  </style>
</head>
<body>
  <div id="clock">
    <div id="hour-hand"></div>
    <div id="minute-hand"></div>
    <div id="second-hand"></div>
    <div id="clock-center"></div>
  </div>

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

const secondDegrees = (seconds / 60) * 360;
      const minuteDegrees = ((minutes + seconds / 60) / 60) * 360;
      const hourDegrees = ((hours % 12 + minutes / 60 + seconds / 3600) / 12) * 360;

secondHand.style.transform = `rotate(${secondDegrees}deg)`;
      minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
      
      setTimeout(rotateClockHands, 1000);
    }

rotateClockHands();
  </script>
</body>
</html>