js钟表实现
JavaScript 钟表实现方法
基础钟表实现
使用 Date 对象获取当前时间，通过 setInterval 定时更新显示：
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock(); // 立即执行一次带指针的模拟钟表
通过 CSS 旋转实现指针动画：
function updateAnalogClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours() % 12;
const secondDeg = seconds * 6;
const minuteDeg = (minutes + seconds/60) * 6;
const hourDeg = (hours + minutes/60) * 30;
document.getElementById('second-hand').style.transform = `rotate(${secondDeg}deg)`;
document.getElementById('minute-hand').style.transform = `rotate(${minuteDeg}deg)`;
document.getElementById('hour-hand').style.transform = `rotate(${hourDeg}deg)`;
}
setInterval(updateAnalogClock, 1000);
updateAnalogClock();对应 HTML 结构：
<div class="clock-face">
<div id="hour-hand" class="hand hour"></div>
<div id="minute-hand" class="hand minute"></div>
<div id="second-hand" class="hand second"></div>
</div>性能优化版本
使用 requestAnimationFrame 实现更流畅的动画：
let lastTime = 0;
function smoothUpdate(timestamp) {
if (!lastTime || timestamp - lastTime >= 1000) {
updateClock();
lastTime = timestamp;
}
requestAnimationFrame(smoothUpdate);
}
requestAnimationFrame(smoothUpdate);世界时钟实现
添加时区支持：
function getWorldTime(timezone) {
return new Date().toLocaleTimeString('en-US', {
timeZone: timezone,
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}注意事项
- 时区处理建议使用
Intl.DateTimeFormat - 移动端需考虑性能优化
- 秒针移动可使用 CSS transition 实现平滑效果
- 24小时制与12小时制需明确区分
完整实现需配合 CSS 样式定义钟表外观和指针动画效果。对于复杂效果，可以考虑使用 Canvas 或 SVG 实现更丰富的视觉效果。
