模拟时钟 - PHP with Javascript - 日期函数

Question

For my personal challenge I am trying to re-create a lo-fi house room. In the room I would like to display a analog clock with the current time, completely programmed with PHP.

I am currently able to "hardcode" it through if statements, but now I would like to move the minutes section every minute at the right time. I couldn't find it on internet, so I hope you can help me out here! Somehow I need to make this a for loop, but I don't know how to iterate through the css section.

Would appreciate any help!

            <div class="clock">
                <?php
                    $m = date("i");
                    echo date("h:i:s");
                    
                    //Need to become a for/while loop
                    if ($m == 14){
                        echo '<div id="mins" style="transform: rotate(60deg);"</div>'; 
                    }
                ?>
                <div id="mins"></div>
            </div>

.clock{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: 45%;
    top: 20%;
}

#mins{
    height: 60px;
    width: 5px;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    background: black;
    transform: rotate(0deg);
    transform-origin: bottom center;
}

Answer 1

My solution with Javascript for an analog script. No PHP needed.

index.php

<div class="clock">
    <div id="hours"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
</div>

javascript

const updateInMS = 1000;

// Get the HTML elements from the page.
const clock = document.getElementsByClassName('clock')[0];
const htmHours = document.getElementById('hours');
const htmMinutes = document.getElementById('minutes');
const htmSeconds = document.getElementById('seconds');

// Start the timer
startTimer();

function startTimer() {
    // Trigger the tick function that loops the clock
    tick();
}

function tick() {
    setTimeout(function() {
        // Retrieve the date
        const now = new Date();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const secondsInDegrees = (360 * seconds) / 60;
        const minutesInDegrees = (360 * minutes) / 60;
        const hoursInDegrees = (360 * hours) / 12;

        htmHours.style.transform = 'rotate(' + hoursInDegrees + 'deg)';
        htmMinutes.style.transform = 'rotate(' + minutesInDegrees + 'deg)';
        htmSeconds.style.transform = 'rotate(' + secondsInDegrees + 'deg)';

        tick();
    }, updateInMS);
}

css

.clock {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: 45%;
    top: 20%;
}

.clock div {
    height: 60px;
    width: 5px;
    left: 50%;
    /* UPDATED THIS TO FIXED: */
    position: fixed;
    transform: translateX(-50%);
    background: black;
    transform: rotate(0deg);
    transform-origin: bottom center;
}

#hours {
    background: black;
}

#minutes {
    background: red;
}

#seconds {
    background: blue;
}

Hope you like my solution.