AI game creator

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

No:14060

←

Prev Next

→

Analog Clock
Developer User6030｜Date and time 23/8/30 22:43:42
Build time 25.571 sec｜Game capacity 3.064KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

.clock {
        position: relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 2px solid #000;
        overflow: hidden;
    }

.clock .hour-hand,
    .clock .minute-hand,
    .clock .second-hand {
        position: absolute;
        width: 2px;
        height: calc(50% - 25px);
        background-color: #000;
        transform-origin: bottom center;
        transition: all 0.5s ease-in-out;
    }

.clock .hour-hand {
        transform: rotate(90deg);
        top: 50%;
        left: calc(50% - 1px);
    }

.clock .minute-hand {
        transform: rotate(180deg);
        top: 25px;
        left: calc(50% - 1px);
    }

.clock .second-hand {
        transform: rotate(270deg);
        top: 25px;
        left: calc(50% - 1px);
        background-color: red;
    }

.clock .center-circle {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #000;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
<script>
    function startClock() {
        var hourHand = document.querySelector('.hour-hand');
        var minuteHand = document.querySelector('.minute-hand');
        var secondHand = document.querySelector('.second-hand');

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

var hourAngle = (hours * 30) + (minutes * 0.5);
        var minuteAngle = minutes * 6;
        var secondAngle = seconds * 6;

hourHand.style.transform = `rotate(${hourAngle}deg)`;
        minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
        secondHand.style.transform = `rotate(${secondAngle}deg)`;

setInterval(function() {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                    if (hours >= 12) {
                        hours = 0;
                    }
                }
            }

hourAngle = (hours * 30) + (minutes * 0.5);
            minuteAngle = minutes * 6;
            secondAngle = seconds * 6;

hourHand.style.transform = `rotate(${hourAngle}deg)`;
            minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
            secondHand.style.transform = `rotate(${secondAngle}deg)`;
        }, 1000);
    }

window.onload = function() {
        startClock();
    };
</script>

</body>
</html>