NHK 時計　文字盤　短針　長針　秒針　黒's game

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

No:20739

←

Prev Next

→

NHK 時計　文字盤　短針　長針　秒針　黒
Developer User3589｜Date and time 23/10/10 22:11:58
Build time 12.577 sec｜Game capacity 1.535KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>NHK Clock</title>
  <style>
    #clock {
      font-size: 2em;
      text-align: center;
      margin-top: 40vh;
    }
    #hour-hand,
    #minute-hand,
    #second-hand {
      position: absolute;
      background-color: black;
      transform-origin: bottom;
    }
    #hour-hand {
      height: 5px;
      width: 50px;
    }
    #minute-hand {
      height: 3px;
      width: 70px;
    }
    #second-hand {
      height: 1px;
      width: 90px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="clock">
    <div id="hour-hand"></div>
    <div id="minute-hand"></div>
    <div id="second-hand"></div>
  </div>

function rotateClockHands() {
      const currentTime = new Date();
      const hours = currentTime.getHours();
      const minutes = currentTime.getMinutes();
      const seconds = currentTime.getSeconds();

const hourRotation = hours * 30 + minutes / 2;
      const minuteRotation = minutes * 6 + seconds / 10;
      const secondRotation = seconds * 6;

hourHand.style.transform = `rotate(${hourRotation}deg)`;
      minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
      secondHand.style.transform = `rotate(${secondRotation}deg)`;

setTimeout(rotateClockHands, 1000);
    }

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