Попробуйте построить аналоговые часы, но стрелка часов не работает должным образом, помогите мне решить код стрелки часов

Question

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, чтобы решить эту проблему или изменить что-то в моем коде.

Answer 1

Требуется всего несколько небольших модификаций.

В частности:

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>