NHK 時計　黒い文字盤　白い数字　白い長針　白い秒針　白い短針　時報　ピッ　ピッ　ピッ　ポーン　効果音　アナログ's game

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

No:20747

←

Prev Next

→

NHK 時計　黒い文字盤　白い数字　白い長針　白い秒針　白い短針　時報　ピッ　ピッ　ピッ　ポーン　効..ALL
Developer User3589｜Date and time 23/10/10 22:26:11
Build time 15.878 sec｜Game capacity 1.927KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>NHK 時計</title>
  <style>
    body {
      background-color: black;
    }

#clock {
      color: white;
      font-size: 100px;
      text-align: center;
      margin-top: 200px;
    }

#hour-hand, #minute-hand, #second-hand {
      position: absolute;
      background-color: white;
      transform-origin: bottom center;
    }

#hour-hand {
      height: 120px;
      width: 6px;
    }

#minute-hand {
      height: 180px;
      width: 4px;
    }

#second-hand {
      height: 200px;
      width: 2px;
    }
  </style>
</head>
<body>
  <div id="clock"></div>
  <script>
    function showTime() {
      const clock = document.getElementById("clock");
      const date = new Date();
      const hours = formatTime(date.getHours());
      const minutes = formatTime(date.getMinutes());
      const seconds = formatTime(date.getSeconds());

clock.innerHTML = `${hours}:${minutes}:${seconds}`;
      rotateHands(hours, minutes, seconds);
    }

function formatTime(time) {
      return time.toString().padStart(2, '0');
    }

function rotateHands(hours, minutes, seconds) {
      const hourHand = document.getElementById("hour-hand");
      const minuteHand = document.getElementById("minute-hand");
      const secondHand = document.getElementById("second-hand");

const hourRotation = (hours * 30) + (minutes * 0.5);
      const minuteRotation = (minutes * 6) + (seconds * 0.1);
      const secondRotation = seconds * 6;

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

function playSound() {
      const audio = new Audio("bell.mp3");
      audio.play();
    }

setInterval(showTime, 1000);
    setInterval(playSound, 3600000);
  </script>
</body>
</html>