鳩時計　アナログ時計　時報's game

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

No:20752

←

Prev Next

→

鳩時計　アナログ時計　時報
Developer User3589｜Date and time 23/10/10 22:35:22
Build time 18.814 sec｜Game capacity 2.61KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>鳩時計 アナログ時計 時報</title>
    <style>
        #clock {
            width: 200px;
            height: 200px;
            border: 5px solid #000;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }

#hour-hand {
            width: 5px;
            height: 60px;
            background-color: #000;
            position: absolute;
            top: 70px;
            left: 98px;
            transform-origin: bottom center;
            transition: transform 0.1s ease-in-out;
        }

#minute-hand {
            width: 3px;
            height: 80px;
            background-color: #000;
            position: absolute;
            top: 55px;
            left: 99px;
            transform-origin: bottom center;
            transition: transform 0.1s ease-in-out;
        }

#second-hand {
            width: 2px;
            height: 90px;
            background-color: #f00;
            position: absolute;
            top: 40px;
            left: 100px;
            transform-origin: bottom center;
            transition: transform 0.1s ease-in-out;
        }

#time {
            font-size: 24px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="clock"></div>
    <div id="time"></div>

const date = new Date();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();

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

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

const timeString = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
            timeElement.textContent = timeString;
        }

setInterval(updateClock, 1000);
    </script>
</body>
</html>