95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
// Analog Clock JavaScript
|
|
class AnalogClock {
|
|
constructor() {
|
|
this.hourHand = document.getElementById('hour-hand');
|
|
this.minuteHand = document.getElementById('minute-hand');
|
|
this.secondHand = document.getElementById('second-hand');
|
|
|
|
// Initialize clock
|
|
this.updateClock();
|
|
|
|
// Update every second
|
|
setInterval(() => {
|
|
this.updateClock();
|
|
}, 1000);
|
|
}
|
|
|
|
updateClock() {
|
|
const now = new Date();
|
|
|
|
// Get current time components
|
|
const hours = now.getHours() % 12; // Convert to 12-hour format
|
|
const minutes = now.getMinutes();
|
|
const seconds = now.getSeconds();
|
|
|
|
// Calculate rotation angles
|
|
const hourAngle = (hours * 30) + (minutes * 0.5); // 30 degrees per hour + minute adjustment
|
|
const minuteAngle = (minutes * 6) + (seconds * 0.1); // 6 degrees per minute + second adjustment
|
|
const secondAngle = seconds * 6; // 6 degrees per second
|
|
|
|
// Apply rotations to hands
|
|
this.hourHand.style.transform = `translateX(-50%) rotate(${hourAngle}deg)`;
|
|
this.minuteHand.style.transform = `translateX(-50%) rotate(${minuteAngle}deg)`;
|
|
this.secondHand.style.transform = `translateX(-50%) rotate(${secondAngle}deg)`;
|
|
|
|
// Store current rotation for smooth animation
|
|
this.hourHand.style.setProperty('--current-rotation', `${hourAngle}deg`);
|
|
this.minuteHand.style.setProperty('--current-rotation', `${minuteAngle}deg`);
|
|
this.secondHand.style.setProperty('--current-rotation', `${secondAngle}deg`);
|
|
}
|
|
|
|
// Method to handle window resize for better responsiveness
|
|
handleResize() {
|
|
const clock = document.querySelector('.clock');
|
|
const container = document.querySelector('.clock-container');
|
|
|
|
// Ensure clock stays centered and properly sized
|
|
const containerRect = container.getBoundingClientRect();
|
|
const maxSize = Math.min(containerRect.width - 40, containerRect.height - 40);
|
|
const clockSize = Math.max(250, Math.min(400, maxSize));
|
|
|
|
clock.style.width = `${clockSize}px`;
|
|
clock.style.height = `${clockSize}px`;
|
|
}
|
|
}
|
|
|
|
// Initialize clock when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const clock = new AnalogClock();
|
|
|
|
// Handle window resize for responsiveness
|
|
let resizeTimeout;
|
|
window.addEventListener('resize', () => {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(() => {
|
|
clock.handleResize();
|
|
}, 100);
|
|
});
|
|
|
|
// Initial resize adjustment
|
|
clock.handleResize();
|
|
});
|
|
|
|
// Optional: Add smooth animation for second hand
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const secondHand = document.getElementById('second-hand');
|
|
|
|
// Enhanced smooth animation for second hand
|
|
const enhanceSecondHandAnimation = () => {
|
|
const now = new Date();
|
|
const milliseconds = now.getMilliseconds();
|
|
const currentSeconds = now.getSeconds();
|
|
const fractionalSeconds = currentSeconds + (milliseconds / 1000);
|
|
|
|
const smoothSecondAngle = fractionalSeconds * 6; // 6 degrees per second
|
|
|
|
// Use CSS transform for smoother animation
|
|
secondHand.style.transition = `transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1)`;
|
|
secondHand.style.transform = `translateX(-50%) rotate(${smoothSecondAngle}deg)`;
|
|
|
|
requestAnimationFrame(enhanceSecondHandAnimation);
|
|
};
|
|
|
|
// Start smooth animation
|
|
requestAnimationFrame(enhanceSecondHandAnimation);
|
|
}); |