波浪背景动态时钟

// 获取时钟指针元素
const hourHand = document.querySelector('.hour-hand');
const minHand = document.querySelector('.min-hand');
const secHand = document.querySelector('.sec-hand');
const digitalClock = document.getElementById('digital-clock');

// 更新时间函数
function updateTime() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    // 计算指针角度
    const hourDeg = (hours % 12) * 30 + minutes * 0.5; // 每小时30度 + 每分钟0.5度
    const minDeg = minutes * 6 + seconds * 0.1; // 每分钟6度 + 每秒0.1度
    const secDeg = seconds * 6; // 每秒6度

    // 应用旋转角度
    hourHand.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
    minHand.style.transform = `translateX(-50%) rotate(${minDeg}deg)`;
    secHand.style.transform = `translateX(-50%) rotate(${secDeg}deg)`;

    // 更新数字时钟
    const hourStr = hours.toString().padStart(2, '0');
    const minStr = minutes.toString().padStart(2, '0');
    const secStr = seconds.toString().padStart(2, '0');
    digitalClock.textContent = `${hourStr}:${minStr}:${secStr}`;
}

// 每秒更新时间
setInterval(updateTime, 1000);

// 初始化时间
updateTime();