本文详解如何为非标准时间系统（如30小时制、12秒=1分钟、12分钟=1小时）构建逻辑正确且视觉平滑的模拟时钟，重点解决分针无法随秒针自然进位的问题。
本文详解如何为非标准时间系统（如30小时制、12秒=1分钟、12分钟=1小时）构建逻辑正确且视觉平滑的模拟时钟，重点解决分针无法随秒针自然进位的问题。
在传统12/24小时制钟表中，指针运动遵循固定比例关系（60秒→1分，60分→1小时），但本例采用斯里兰卡传统时间制（Sinhala Time）：
- 1 圈 = 30 小时（非12或24）
- 1 小时 = 12 分钟
- 1 分钟 = 12 秒
即：1 圈 = 30 × 12 × 12 = 4320 秒（而非标准的43200秒）。该设计要求指针以整数步进+连续过渡方式联动——秒针每走12步（1圈），分针前进1步；分针每走12步（1圈），时针前进1步。
原代码的核心缺陷在于手动维护 sinhalaMinutes 的递增逻辑失败：
- 错误地依赖 if (sinhalaSeconds
- 更严重的是，sinhalaMinutes 是从总毫秒数直接计算得出的静态值（Math.floor(remainingMilliseconds / (60 * 12 * 1000))），它本身已隐含完整进位逻辑，无需也不应被手动修改。
✅ 正确解法是放弃手动状态同步，转而用统一时间基线推导所有指针角度：
function updateClock() {
// 总秒数（按自定义制式）：1秒 = 1单位，1圈 = 4320秒
const totalSeconds = Math.floor(totalMilliseconds / 1000);
// 秒针：每12秒转一圈 → 角度 = (totalSeconds % 12) × 30°
const secondDeg = (totalSeconds % 12) * 360 / 12;
// 分针：每12秒前进1/12圈 → 角度 = (totalSeconds / 12) × 30°
// 使用 totalSeconds / 12 实现平滑过渡（非 Math.floor）
const minuteDeg = (totalSeconds / 12) * 360 / 12;
// 时针：每144秒（12×12）前进1/30圈 → 角度 = (totalSeconds / 144) × 12°
const hourDeg = (totalSeconds / (12 * 12)) * 360 / 30;
// 应用旋转（CSS transform）
secondHand.style.transform = `rotate(${secondDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
}
? 关键公式解析：
- 秒针：totalSeconds % 12 确保每12秒归零，对应12步一圈；
- 分针：totalSeconds / 12 表示已完成的“分钟数”（含小数），乘以 360/12=30° 即每分钟对应的角度，自然实现每秒移动 30°/12 = 2.5° 的平滑效果；
- 时针：totalSeconds / 144 是已完成的“小时数”（因1小时=144秒），乘以 360/30=12° 得每小时角度，实现每秒移动 12°/144 ≈ 0.083°。
⚠️ 注意事项：
- 刷新频率需提高：原 setInterval(..., 1000) 导致秒针“跳变”。改为 setInterval(..., 100)（10次/秒）可显著提升流畅度，配合小数角度计算实现视觉平滑；
- 避免 Math.floor() 破坏连续性：答案中曾用 Math.floor(minutes) 强制“跳秒”效果，若需真实模拟机械钟表的滴答感可保留；但追求平滑动画时务必移除；
- 时间基准一致性：所有指针必须基于同一 totalSeconds 计算，杜绝各自独立取模导致的相位偏移；
- CSS 优化：为获得最佳性能，建议为 .hand 元素添加 will-change: transform 或启用 transform: translateZ(0) 硬件加速。
最终，该方案彻底解耦指针逻辑，以数学关系替代状态管理，既保证30小时制下的精确计时，又支持毫秒级平滑动画——真正实现“自定义时间宇宙”的可信可视化。
