时间戳

首页 > 解决方案 > JavaScript 模拟时钟

javascript - JavaScript 模拟时钟

问题描述

我正在使用 javascript 创建一个模拟时钟进行练习并查看了代码，但我无法理解为什么我们需要将秒除以 60、min+sec/60 和 hour+min/12，您能否让我理解如何这个算法有效吗？我的代码是

const hour = document.getElementById('hour');
const minute = document.getElementById('minute');
const second = document.getElementById('second');

setInterval(updateClock,1000);

function updateClock() {
let date = new Date()
let sec = date.getSeconds()/60

let min = (date.getMinutes() + sec) / 60;

let hr = (date.getHours() + min) / 12;


hour.style.transform = "rotate(" + (hr * 360) + "deg)";
minute.style.transform ="rotate(" + (min * 360) + "deg)";
second.style.transform = "rotate(" + (sec * 360) + "deg)";
}
updateClock()

标签： javascript

解决方案

您基本上将 date.getSeconds() 除以 60，以便您可以更轻松地将其添加到分钟。更好的解决方案是：

const hour = document.getElementById('hour');
const minute = document.getElementById('minute');
const second = document.getElementById('second');

setInterval(updateClock);

function updateClock() {
    let date = new Date()
    let sec = date.getSeconds()

    let min = date.getMinutes() + sec/60;

    let hr = date.getHours() + min/60; // you could also add + sec/3600 but that would barely make any difference


    hour.style.transform = `rotate(${hr * 30}deg)`;
    minute.style.transform =`rotate(${min * 6}deg)`;
    second.style.transform = `rotate(${sec * 6}deg)`;
}

这消除了实际上非常无用的坏除法，因为它只使用了一次。

最后的乘法（hr * 30、min*6 和 sec*6）非常简单。度数从 0 到 360，但分钟和秒只从 0 到 60。所以我们将它们乘以 6。小时从 0 到 12，所以我们将它们乘以 30。

此外，您不需要在底部调用 updateClock() ，因为它在间隔中。

最后，您应该比每秒更频繁地调用间隔。您可以删除该号码，以便尽快完成。或使用 100 使其精确到 1/10 秒。

希望我能帮助你。

推荐阅读