Как мне решить проблему с 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