javascript - 尝试构建一个模拟时钟，但其时针不正确，请帮助我解决时针的代码

const secondHand = document.querySelector('.sec');
const minHand = document.querySelector('.min');
const hoursHand = document.querySelector('.hour');
function setDate(){
  const now = new Date();
	const seconds= now.getSeconds();
	const secondsDegree =((seconds /60) *360) + 90;
	secondHand.style.transform =`rotate(${secondsDegree}deg)`;

	const Mins= now.getMinutes();
	const minsDegree =((Mins /60) *360) + 90;
	minHand.style.transform =`rotate(${minsDegree}deg)`;

  const hours= now.getHours();
	const hoursDegree =((Mins /12) *360) + 90;
	hoursHand.style.transform =`rotate(${hoursDegree}deg)`;
}

setInterval(setDate, 1000);

body {
    background-image: url("sky.jpg");
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    font-size: 2rem;
}

.face {
    position: relative;
    transform: translateY(-3px);
    width: 100%;
    height: 100%;
}
.clock {
    border: 9px solid red;
    width: 21rem;
    height: 21rem;
    border-radius: 50%;
}
.hand {
	transition : all 0.05s;
	transform-origin: 100%;
    background-color: black;
    height: 2px;
    width: 50%;
    position: absolute;
    top: 50%;
}
.hand.sec {
    transform: rotate(60deg);
    transition-timing-function: cubic-bezier(0.42, 0, 0.82, 1.51);
}
.hand.hour {
    height: 3px;
    color: black;
    font-size: 8px;
    background-color: red;
}
.hand.min {
    color: black;
    background-color: blue;
    font-size: 8px;
}
audio {
    display: none;
}

<div class="clock">
<div class="face">
<div class="hand hour"> &nbsp;&nbsp; THIS HAND INDICATE THE HOURS</div>
<div class="hand min">&nbsp;&nbsp;THIS HAND INDICATE THE Minutes</div>
<div class="hand sec"></div>
</div>
</div>

我想用小时，分钟和秒三指针来构建一个模拟时钟。但是时针工作不正常，我认为时针的计算存在一些问题，请帮我解决这个问题。

您也可以检查css属性来解决此问题或更改我的代码。

最佳答案

只需要进行一些小的修改。

特别：

const hoursDegree =(((hours%12)/12) *360.0) + 90;

const secondHand = document.querySelector('.sec');
const minHand = document.querySelector('.min');
const hoursHand = document.querySelector('.hour');
function setDate(){
    const now = new Date();
    const seconds= now.getSeconds();
    const secondsDegree =((seconds / 60.0) *360) + 90;
    secondHand.style.transform =`rotate(${secondsDegree}deg)`;

    const Mins= now.getMinutes();
    const minsDegree =((Mins / 60.0) *360) + 90;
    minHand.style.transform =`rotate(${minsDegree}deg)`;

    const hours= now.getHours();
    const hoursDegree =(((hours%12) / 12.0) *360) + 90;
    hoursHand.style.transform =`rotate(${hoursDegree}deg)`;
}

setInterval(setDate, 1000);

body {
    background-image: url("sky.jpg");
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    font-size: 2rem;
}

.face {
    position: relative;
    transform: translateY(-3px);
    width: 100%;
    height: 100%;
}
.clock {
    border: 9px solid red;
    width: 21rem;
    height: 21rem;
    border-radius: 50%;
}
.hand {
	transition : all 0.05s;
	transform-origin: 100%;
    background-color: black;
    height: 2px;
    width: 50%;
    position: absolute;
    top: 50%;
}
.hand.sec {
    transform: rotate(60deg);
    transition-timing-function: cubic-bezier(0.42, 0, 0.82, 1.51);
}
.hand.hour {
    height: 3px;
    color: black;
    font-size: 8px;
    background-color: red;
}
.hand.min {
    color: black;
    background-color: blue;
    font-size: 8px;
}
audio {
    display: none;
}

<div class="clock">
<div class="face">
<div class="hand hour"> &nbsp;&nbsp; THIS HAND INDICATE THE HOURS</div>
<div class="hand min">&nbsp;&nbsp;THIS HAND INDICATE THE Minutes</div>
<div class="hand sec"></div>
</div>
</div>

关于javascript - 尝试构建一个模拟时钟，但其时针不正确，请帮助我解决时针的代码，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52351477/