关于JS实现时钟定时器的攻略如下：

确定设计思路

1.获取当前时间
2.计算时针、分针、秒针的位置
3.将时针、分针、秒针对应的角度应用到实际页面上

获取当前时间

我们需要获取当前的系统时间，这可以通过JS的Date对象实现。使用 new Date() 可以初始化一个Date对象，然后分别获取当前时间的小时、分钟、秒等信息。

const now = new Date()
const hour = now.getHours()
const minute = now.getMinutes()
const second = now.getSeconds()

计算时针、分针、秒针的位置

计算时针、分针和秒针的位置，可以根据当前时间的小时、分钟、秒分别计算。

const hourDeg = (hour % 12) * 30 + minute / 2 // 每小时对应的角度为30度，加上分钟的偏移量
const minuteDeg = minute * 6 + second / 10 // 每分钟对应的角度为6度，加上秒钟的偏移量
const secondDeg = second * 6 // 每秒钟对应的角度为6度

将角度应用到实际页面上

使用JS来动态更新CSS样式，将时针、分针、秒针的旋转角度应用到实际页面上。

document.querySelector('.hour').style.transform = `rotate(${hourDeg}deg)`
document.querySelector('.minute').style.transform = `rotate(${minuteDeg}deg)`
document.querySelector('.second').style.transform = `rotate(${secondDeg}deg)`

示例说明

示例一

我们先来看一个简单的例子，如何实现一个基本的时钟。

<!DOCTYPE html>
<html>
<head>
    <title>JS实现时钟定时器示例</title>
    <style type="text/css">
        .clock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: #fff;
            border: 10px solid #000;
        }
        .clock .hand {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 80px;
            margin-left: -1px;
            transform-origin: 50% 80px;
            background-color: #000;
        }
        .clock .hour {
            height: 50px;
            background-color: #000;
            transform-origin: 50% 50px;
        }
        .clock .minute {
            height: 70px;
            background-color: #000;
            transform-origin: 50% 70px;
            z-index: 1;
        }
        .clock .second {
            height: 80px;
            background-color: red;
            transform-origin: 50% 80px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hand hour"></div>
        <div class="hand minute"></div>
        <div class="hand second"></div>
    </div>

    <script type="text/javascript">
        function tick() {
            const now = new Date()
            const hour = now.getHours()
            const minute = now.getMinutes()
            const second = now.getSeconds()

            const hourDeg = (hour % 12) * 30 + minute / 2 // 每小时对应的角度为30度，加上分钟的偏移量
            const minuteDeg = minute * 6 + second / 10 // 每分钟对应的角度为6度，加上秒钟的偏移量
            const secondDeg = second * 6 // 每秒钟对应的角度为6度

            document.querySelector('.hour').style.transform = `rotate(${hourDeg}deg)`
            document.querySelector('.minute').style.transform = `rotate(${minuteDeg}deg)`
            document.querySelector('.second').style.transform = `rotate(${secondDeg}deg)`
        }

        setInterval(tick, 1000)
    </script>
</body>
</html>

在页面中我们定义了一个div元素来展示时钟，时针、分针、秒针通过设置不同的 transform-origin 来实现位置的不同。通过JS定时器来更新时针、分针、秒针的角度，从而实现时钟的更新。

示例二

继续来看一个稍微复杂一点的例子，如何在建立一个高性能的时钟。

<!DOCTYPE html>
<html>
<head>
    <title>JS实现高性能时钟定时器示例</title>
    <style type="text/css">
        .clock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: #fff;
            border: 10px solid #000;
        }
        .clock .hand {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 80px;
            margin-left: -1px;
            transform-origin: 50% 80px;
            background-color: #000;
        }
        .clock .hour {
            height: 50px;
            background-color: #000;
            transform-origin: 50% 50px;
        }
        .clock .minute {
            height: 70px;
            background-color: #000;
            transform-origin: 50% 70px;
            z-index: 1;
        }
        .clock .second {
            height: 80px;
            background-color: red;
            transform-origin: 50% 80px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hand hour"></div>
        <div class="hand minute"></div>
        <div class="hand second"></div>
    </div>

    <script type="text/javascript">
        // 获取DOM元素
        const hourHand = document.querySelector('.hour')
        const minuteHand = document.querySelector('.minute')
        const secondHand = document.querySelector('.second')

        // 计算角度
        function calcDeg(hour, minute, second) {
            const hourDeg = (hour % 12) * 30 + minute / 2 // 每小时对应的角度为30度，加上分钟的偏移量
            const minuteDeg = minute * 6 + second / 10 // 每分钟对应的角度为6度，加上秒钟的偏移量
            const secondDeg = second * 6 // 每秒钟对应的角度为6度

            return {
                hourDeg,
                minuteDeg,
                secondDeg
            }
        }

        // 更新时针、分针、秒针旋转角度
        function updateClock() {
            const now = new Date()
            const { hourDeg, minuteDeg, secondDeg } = calcDeg(now.getHours(), now.getMinutes(), now.getSeconds())

            hourHand.style.transform = `rotate(${hourDeg}deg)`
            minuteHand.style.transform = `rotate(${minuteDeg}deg)`
            secondHand.style.transform = `rotate(${secondDeg}deg)`
        }

        // 设置 requestAnimationFrame
        let handle = null
        function raf() {
            updateClock()
            handle = requestAnimationFrame(raf)
        }

        // 开启 requestAnimationFrame
        handle = requestAnimationFrame(raf)

        // 取消 requestAnimationFrame
        //cancelAnimationFrame(handle)
    </script>
</body>
</html>

在这个例子中，我们将一些计算动作提前到一个独立的函数中，以减轻 updateClock 函数的压力。我们还使用 requestAnimationFrame 来代替 setTimeout，以提高时钟的性能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现时钟定时器 - Python技术站

js实现时钟定时器

确定设计思路

获取当前时间

计算时针、分针、秒针的位置

将角度应用到实际页面上

示例说明

示例一

示例二

相关文章