Time keeper display 5 analoge clock 1 for each time zone's game

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

No:49012

111

←

Prev Next

→

Time keeper display 5 analoge clock 1 for each tim..ALL
Developer User18896｜Date and time 24/3/3 13:19:31
Build time 6.097 sec｜Game capacity 1.971KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Time Keeper Game</title>
<style>
    .clock {
        width: 100px;
        height: 100px;
        border: 5px solid black;
        border-radius: 50%;
        position: relative;
    }
    .hour,
    .minute,
    .second {
        width: 50%;
        height: 2px;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 0% 50%;
    }
    .hour {
        height: 4px;
    }
    .minute {
        background-color: blue;
    }
    .second {
        height: 1px;
        background-color: red;
    }
</style>
</head>
<body>

function updateClocks() {
            var currentDate = new Date();
            
            var timeZones = [0, -3, -5, 2, 8]; // Assumed time zones for the clocks
            for (var i = 0; i < clocks.length; i++) {
                var hours = currentDate.getUTCHours() + timeZones[i];
                var minutes = currentDate.getUTCMinutes();
                var seconds = currentDate.getUTCSeconds();

var hourDeg = (hours + minutes / 60) * 30;
                var minuteDeg = (minutes + seconds / 60) * 6;
                var secondDeg = seconds * 6;

clocks[i].innerHTML = '<div class="hour" style="transform: rotate(' + hourDeg + 'deg);"></div>' +
                                      '<div class="minute" style="transform: rotate(' + minuteDeg + 'deg);"></div>' +
                                      '<div class="second" style="transform: rotate(' + secondDeg + 'deg);"></div>';
            }
        }

setInterval(updateClocks, 1000);
    }

startClocks();
</script>

</body>
</html>