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:14010

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <style>
  .clock-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
  }

.clock {
    display: flex;
    justify-content: center;
    align-items: center;
  }

.digital-clock {
    font-size: 24px;
    margin-bottom: 20px;
  }

.temperature {
    font-size: 18px;
    font-weight: bold;
  }

.description {
    font-style: italic;
    margin-top: 10px;
  }
  </style>
</head>
<body>
  <div class="clock-container">
    <div class="clock">
      <canvas id="analog-clock" width="200" height="200"></canvas>
      <div id="digital-clock" class="digital-clock"></div>
    </div>
    <div id="temperature" class="temperature"></div>
    <div id="weather-description" class="description"></div>
  </div>

function drawClock() {
      const context = canvas.getContext("2d");
      const radius = canvas.height / 2;
      context.clearRect(0, 0, canvas.width, canvas.height);

context.beginPath();
      context.arc(radius, radius, radius - 5, 0, 2 * Math.PI);
      context.lineWidth = 2;
      context.strokeStyle = "black";
      context.stroke();

context.font = "14px Arial";
      context.fillStyle = "black";
      context.textAlign = "center";
      context.textBaseline = "middle";
      for (let i = 1; i <= 12; i++) {
        const angle = (i * Math.PI) / 6;
        const x = radius + (radius - 20) * Math.sin(angle);
        const y = radius - (radius - 20) * Math.cos(angle);
        context.fillText(i.toString(), x, y);
      }

const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();

// Hour hand
      context.beginPath();
      context.moveTo(radius, radius);
      const hourX = radius + (radius - 50) * Math.sin((hour * Math.PI) / 6 + (minute * Math.PI) / 360);
      const hourY = radius - (radius - 50) * Math.cos((hour * Math.PI) / 6 + (minute * Math.PI) / 360);
      context.lineTo(hourX, hourY);
      context.lineWidth = 6;
      context.strokeStyle = "black";
      context.stroke();

// Minute hand
      context.beginPath();
      context.moveTo(radius, radius);
      const minuteX = radius + (radius - 30) * Math.sin((minute * Math.PI) / 30);
      const minuteY = radius - (radius - 30) * Math.cos((minute * Math.PI) / 30);
      context.lineTo(minuteX, minuteY);
      context.lineWidth = 4;
      context.strokeStyle = "black";
      context.stroke();

// Second hand
      context.beginPath();
      context.moveTo(radius, radius);
      const secondX = radius + (radius - 10) * Math.sin((second * Math.PI) / 30);
      const secondY = radius - (radius - 10) * Math.cos((second * Math.PI) / 30);
      context.lineTo(secondX, secondY);
      context.lineWidth = 2;
      context.strokeStyle = "red";
      context.stroke();
    }

function updateTemperatureAndWeather() {
      // Here you can implement code to fetch temperature and weather description

// For demonstration purposes, we will use dummy data
      const temperatureValue = "25°C";
      const weatherDescriptionValue = "Sunny";

temperature.textContent = `Temperature: ${temperatureValue}`;
      weatherDescription.textContent = `Weather: ${weatherDescriptionValue}`;
    }

// Update the clock and digital clock every second
    setInterval(() => {
      drawClock();
      updateDigitalClock();
    }, 1000);

// Fetch temperature and weather every 10 minutes
    setInterval(() => {
      updateTemperatureAndWeather();
    }, 600000);
  </script>
</body>
</html>