Как мне решить проблему с JS-кодом, чтобы сделать мой простой проект лучше, чем раньше? [закрыто] ⇐ CSS

[Anonymous]

Я создал проект аналоговых и цифровых часов для практики фронтенд-разработки. Цифровые часы идут правильно, но аналоговые часы работают неправильно. Минутная и часовая стрелки аналоговых часов вращаются плавно, но эти две стрелки прыгают вперед и возвращаются в правильное положение с заданными интервалами в секундах и минутах.
Прежде чем возникла эта проблема, я столкнулся с другой где минутная и часовая стрелки находились в неправильном положении. После решения этой задачи минутная и часовая стрелки перепрыгивают на одну минуту и ​​на один час вперед соответственно (на одну минуту больше и на один час больше), когда 60-секундный интервал завершается, минутная стрелка плавно вращается на одну минуту вперед, но ровно через 60 секунд она прыгает еще на минуту вперед. Таким же образом часовая стрелка ведет себя по истечении 60-минутного интервала. Минутная и часовая стрелки снова вернутся в правильное положение через 15 секунд и 15 минут соответственно.
Вот фрагмент кода.

Код: Выделить всё

const hourHand = document.getElementById('hour');
const minuteHand = document.getElementById('minute');
const secondHand = document.getElementById('second');
const digitalClock = document.getElementById('digital-clock');

// Offset variables (to correct the delay)
const offsetHours = 3; // Analog clock is 3 hours ahead
const offsetMinutes = 15; // Analog clock is 15 minutes ahead
const offsetSeconds = 15; // Analog clock is 15 seconds ahead

function updateClock() {
const now = new Date();

// Adjust Bangladesh time for both clocks
const localOffset = now.getTimezoneOffset() * 60 * 1000; // Local offset in milliseconds
const bangladeshOffset = 6 * 60 * 60 * 1000; // Bangladesh offset in milliseconds (GMT+6)
const bangladeshTime = new Date(now.getTime() + localOffset + bangladeshOffset);

// Get digital time components
const digitalHours = bangladeshTime.getHours();
const digitalMinutes = bangladeshTime.getMinutes();
const digitalSeconds = bangladeshTime.getSeconds();

// Adjust analog clock by subtracting the offset
const correctedHours = (digitalHours - offsetHours + 24) % 24; // Ensure valid 24-hour format
const correctedMinutes = (digitalMinutes - offsetMinutes + 60) % 60; // Ensure valid 60 minutes
const correctedSeconds = (digitalSeconds - offsetSeconds + 60) % 60; // Ensure valid 60 seconds

// Calculate degrees for the analog clock hands
const hourDeg = (360 / 12) * (correctedHours % 12) + (30 / 60) * correctedMinutes;
const minuteDeg = (360 / 60) * correctedMinutes + (6 / 60) * correctedSeconds;
const secondDeg = (360 / 60) * correctedSeconds;

// Apply rotation to analog clock hands
hourHand.style.transform = `rotate(${hourDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
secondHand.style.transform = `rotate(${secondDeg}deg)`;

// Update the digital clock display
const formattedHours = digitalHours < 10 ? `0${digitalHours}` : digitalHours;
const formattedMinutes = digitalMinutes < 10 ? `0${digitalMinutes}` : digitalMinutes;
const formattedSeconds = digitalSeconds <  10 ? `0${digitalSeconds}` : digitalSeconds;
const amPm = digitalHours >= 12 ? 'PM' : 'AM';

digitalClock.textContent = `${formattedHours % 12 || 12}:${formattedMinutes}:${formattedSeconds} ${amPm}`;
}

// Update the clock every 1000ms (1 second)
setInterval(updateClock, 1000);

// Initialize the clock immediately
updateClock();

Код: Выделить всё

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(to bottom, #f4f4f4, #ccc);
font-family: 'Arial', sans-serif;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
}

.clock {
position: relative;
width: 350px;
height: 350px;
border: 8px solid black;
border-radius: 50%;
background: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.center {
position: absolute;
width: 12px;
height: 12px;
background: black;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.hand {
position: absolute;
width: 50%;
height: 6px;
background: black;
top: 50%;
left: 50%;
transform-origin: 0%;
/* Ensure the hand rotates from the center */
transform: translate(-50%, -50%);
transition: transform 0.05s ease-in-out;
}

.hand {
position: absolute;
width: 50%;
height: 6px;
background: black;
top: 50%;
left: 50%;
transform-origin: 0% 50%;
/* Rotates around the base of the hand */
transform: translate(-50%, -50%);
transition: transform 0.05s ease-in-out;
}

.hour {
width: 25%;
height: 6px;
background: black;
}

.minute {
width: 40%;
height: 4px;
background: black;
}

.second {
background: red;
height: 2px;
}

.numbers {
position: absolute;
width: 100%;
height: 100%;
}

.number {
position: absolute;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 1.2em;
font-weight: bold;
color: black;
transform-origin: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(-140px);
}

.number:after {
content: attr(data-number);
display: block;
transform: rotate(calc(var(--i) * -30deg));
}

.digital-clock {
margin-top: 20px;
font-size: 2em;
font-weight: bold;
color: black;
text-align: center;
background: white;
padding: 10px 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

Код: Выделить всё

00:00:00 AM

Подробнее здесь: https://stackoverflow.com/questions/792 ... han-before