Working Analog Clock And Digital Clock And Temperature And Weather's game

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

No:14034

←

Prev Next

→

Working Analog Clock And Digital Clock And Tempera..ALL
Developer User6030｜Date and time 23/8/30 21:20:23
Build time 27.002 sec｜Game capacity 3.971KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
         font-family: Arial, sans-serif;
         }
         #analog-clock {
         width: 200px;
         height: 200px;
         position: relative;
         margin: auto;
         margin-top: 50px;
         border: 1px solid #000;
         border-radius: 50%;
         }
         #hour-hand,
         #minute-hand,
         #second-hand {
         position: absolute;
         background-color: #000;
         transform-origin: bottom center;
         }
         #hour-hand {
         width: 8px;
         height: 60px;
         top: 70px;
         left: 96px;
         border-radius: 4px 4px 0 0;
         }
         #minute-hand {
         width: 4px;
         height: 80px;
         top: 50px;
         left: 98px;
         }
         #second-hand {
         width: 2px;
         height: 90px;
         top: 40px;
         left: 99px;
         background-color: #f00;
         }
         #digital-clock {
         font-size: 24px;
         text-align: center;
         margin-top: 20px;
         }
         #temperature {
         font-size: 18px;
         text-align: center;
         margin-top: 10px;
         }
      </style>
   </head>
   <body>
      <div id="analog-clock"></div>
      <div id="digital-clock"></div>
      <div id="temperature"></div>
      <script>
         function updateClock() {
             // Get current time
             let currentTime = new Date();
             let hours = currentTime.getHours();
             let minutes = currentTime.getMinutes();
             let seconds = currentTime.getSeconds();
         
             // Calculate angles for hour, minute and second hands
             let hourAngle = 30 * hours + minutes / 2;
             let minuteAngle = 6 * minutes + seconds / 10;
             let secondAngle = 6 * seconds;
         
             // Rotate hour, minute and second hands
             document.getElementById("hour-hand").style.transform = `rotate(${hourAngle}deg)`;
             document.getElementById("minute-hand").style.transform = `rotate(${minuteAngle}deg)`;
             document.getElementById("second-hand").style.transform = `rotate(${secondAngle}deg)`;
         
             // Update digital clock
             let digitalClock = document.getElementById("digital-clock");
             digitalClock.textContent = `${formateDigits(hours)}:${formateDigits(minutes)}:${formateDigits(seconds)}`;
         
             // Update temperature and weather
             let temperatureDiv = document.getElementById("temperature");
             getTemperature().then(function(temperature) {
                 temperatureDiv.textContent = `Temperature: ${temperature}°C`;
                 getWeather().then(function(weather) {
                     temperatureDiv.textContent += ` | Weather: ${weather}`;
                 });
             });
         }
         
         function formateDigits(digit) {
             return digit < 10 ? `0${digit}` : `${digit}`;
         }
         
         function getTemperature() {
             // Simulating temperature reading using a promise
             return new Promise(function(resolve, reject) {
                 setTimeout(function() {
                     resolve(Math.floor(Math.random() * 30) + 10);
                 }, 1000);
             });
         }
         
         function getWeather() {
             // Simulating weather reading using a promise
             return new Promise(function(resolve, reject) {
                 setTimeout(function() {
                     let weatherOptions = ["Sunny", "Rainy", "Cloudy", "Partly Cloudy"];
                     let randomIndex = Math.floor(Math.random() * weatherOptions.length);
                     resolve(weatherOptions[randomIndex]);
                 }, 2000);
             });
         }
         
         // Start clock and weather updates
         setInterval(updateClock, 1000);
      </script>
   </body>
</html>