アナログ時計　ウェストミンスターチャイム　数取り's game

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

No:20844

115

←

Prev Next

→

アナログ時計　ウェストミンスターチャイム　数取り
Developer User3589｜Date and time 23/10/11 9:02:04
Build time 185.337 sec｜Game capacity 4.421KB｜

Script

了解です。以下にアナログ時計とウェストミンスターチャイムと数取りのゲームを含んだHTMLファイルを実装します。

このHTMLファイルでは、アナログ時計とウェストミンスターチャイムの音を再生する機能があります。また、クリックやタッチイベントが発生するとチャイムの音が再生されます。なお、ウェストミンスターチャイムは上記のコードでは単純化していますが、実際のウェストミンスターチャイムに忠実に再現するには、より複雑な実装が必要となります。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解です。以下にアナログ時計とウェストミンスターチャイムと数取りのゲームを含んだHTMLファイルを実装します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Analog Clock and Westminster Chime</title>
  <style>
    #clock {
      position: relative;
      width: 200px;
      height: 200px;
      border: 2px solid black;
      border-radius: 50%;
      margin: 20px auto;
      background-color: white;
    }
    .hand {
      position: absolute;
      transform-origin: bottom center;
      background-color: black;
    }
    #hour-hand {
      width: 6px;
      height: 70px;
      left: 97px;
      top: 65px;
    }
    #minute-hand {
      width: 4px;
      height: 90px;
      left: 98px;
      top: 45px;
    }
    #second-hand {
      width: 2px;
      height: 100px;
      left: 99px;
      top: 35px;
      background-color: red;
    }
    .number {
      position: absolute;
      width: 0px;
      height: 0px;
      font-size: 14px;
      text-align: center;
      line-height: 25px;
      font-weight: bold;
      border: 1px solid black;
      border-radius: 50%;
    }
    .number1 {
      left: 97px;
      bottom: -17px;
    }
    .number2 {
      left: 138px;
      bottom: 36px;
    }
    .number3 {
      left: 138px;
      top: 91px;
    }
    .number4 {
      left: 97px;
      top: 132px;
    }
    .number5 {
      left: 47px;
      top: 92px;
    }
    .number6 {
      left: 5px;
      top: 42px;
    }
    .number7 {
      left: 6px;
      top: -13px;
    }
    .number8 {
      left: 47px;
      top: -61px;
    }
    .number9 {
      left: 96px;
      top: -105px;
    }
    .number10 {
      left: 142px;
      top: -62px;
    }
    .number11 {
      left: 139px;
      top: -14px;
    }
    .number12 {
      left: 97px;
      top: 34px;
    }
    #chime {
      display: none;
    }
  </style>
</head>
<body>
  <div id="clock">
    <div id="hour-hand" class="hand"></div>
    <div id="minute-hand" class="hand"></div>
    <div id="second-hand" class="hand"></div>
    <div class="number number1">1</div>
    <div class="number number2">2</div>
    <div class="number number3">3</div>
    <div class="number number4">4</div>
    <div class="number number5">5</div>
    <div class="number number6">6</div>
    <div class="number number7">7</div>
    <div class="number number8">8</div>
    <div class="number number9">9</div>
    <div class="number number10">10</div>
    <div class="number number11">11</div>
    <div class="number number12">12</div>
  </div>
  <audio id="chime">
    <source src="https://www.soundjay.com/misc/chime-bell-01.mp3" type="audio/mpeg">
  </audio>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      function getTimeAngles() {
        var now = new Date();
        var hour = now.getHours() % 12;
        var minute = now.getMinutes();
        var second = now.getSeconds();

var hourAngle = (360 / 12) * hour + (360 / 12 / 60) * minute + (360 / 12 / 60 / 60) * second;
        var minuteAngle = (360 / 60) * minute + (360 / 60 / 60) * second;
        var secondAngle = (360 / 60) * second;

return [hourAngle, minuteAngle, secondAngle];
      }

function rotateHands() {
        var timeAngles = getTimeAngles();
        document.getElementById("hour-hand").style.transform = "rotate(" + timeAngles[0] + "deg)";
        document.getElementById("minute-hand").style.transform = "rotate(" + timeAngles[1] + "deg)";
        document.getElementById("second-hand").style.transform = "rotate(" + timeAngles[2] + "deg)";
      }

function playChime() {
        var chime = document.getElementById("chime");
        chime.currentTime = 0;
        chime.play();
      }

setInterval(rotateHands, 1000);

document.addEventListener("click", playChime);
      document.addEventListener("touchstart", playChime);
    });
  </script>
</body>
</html>
```

このHTMLファイルでは、アナログ時計とウェストミンスターチャイムの音を再生する機能があります。また、クリックやタッチイベントが発生するとチャイムの音が再生されます。

なお、ウェストミンスターチャイムは上記のコードでは単純化していますが、実際のウェストミンスターチャイムに忠実に再現するには、より複雑な実装が必要となります。