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

Question

对于我的个人挑战，我正在尝试重新创建一个低保真的房间。在房间里，我想显示一个带有当前时间的模拟时钟，完全用PHP编程。

我目前能够"；硬编码"；通过if语句，但现在我想在正确的时间每分钟移动一次会议记录部分。我在网上找不到它，所以我希望你能在这里帮我！不知怎么的，我需要让它成为一个for循环，但我不知道如何遍历css部分。

非常感谢您的帮助！

<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

我的模拟脚本Javascript解决方案。不需要PHP。

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;
}

希望你喜欢我的解决方案。