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

No:49006

Time kerper a analog clock for each time zone
Developer User18896｜Date and time 24/3/3 13:16:10
Build time 5.873 sec｜Game capacity 1.594KB｜

Script

World Clock Game

Tap the start button to begin the game!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>World Clock</title>
</head>
<body>
  <h1>World Clock Game</h1>
  <p>Tap the start button to begin the game!</p>
  
  <button onclick="startGame()">Start</button>
  
  <div id="clocks">
    <div id="clock1"></div>
    <div id="clock2"></div>
    <div id="clock3"></div>
  </div>
  
  <script>
    function startGame() {
      let currentTime = new Date();
      let hours = currentTime.getHours();
      let minutes = currentTime.getMinutes();
      let seconds = currentTime.getSeconds();
      
      const clock1 = document.getElementById("clock1");
      const clock2 = document.getElementById("clock2");
      const clock3 = document.getElementById("clock3");
      
      clock1.innerHTML = `<img src="timezone1.png"> ${hours}:${minutes}:${seconds}`;
      clock2.innerHTML = `<img src="timezone2.png"> ${hours - 2}:${minutes}:${seconds}`;
      clock3.innerHTML = `<img src="timezone3.png"> ${hours + 3}:${minutes}:${seconds}`;
      
      setInterval(() => {
        seconds++;
        if (seconds >= 60) {
          seconds = 0;
          minutes++;
          if (minutes >= 60) {
            minutes = 0;
            hours++;
            if (hours >= 24) {
              hours = 0;
            }
          }
        }
        
        clock1.innerHTML = `<img src="timezone1.png"> ${hours}:${minutes}:${seconds}`;
        clock2.innerHTML = `<img src="timezone2.png"> ${hours - 2}:${minutes}:${seconds}`;
        clock3.innerHTML = `<img src="timezone3.png"> ${hours + 3}:${minutes}:${seconds}`;
      }, 1000);
    }
  </script>
</body>
</html>