抖音上最潮的罗盘时钟，如此制作，简单炫酷！

2024-02-06 01:07:51

抖音上最近很火的罗盘时钟效果，相信大家都看过吧？它可以通过简单的几步就能制作出来，今天我们就一起来学习一下吧。

1. 解析几个重要部分

首先，我们需要解析一下这个时钟的关键部分：

一个圆环，圆环上摆放着数字。
一个指针，指针指向当前时间。
一个亮着的数字，表示当前时间。

2. 搭建HTML框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        /* 整体样式 */
        body {
            background: #000;
            font-family: sans-serif;
        }

        /* 圆环样式 */
        #clock-ring {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin: 0 auto;
            position: relative;
        }

        /* 数字样式 */
        .clock-number {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: #fff;
        }

        /* 指针样式 */
        #clock-pointer {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 100px;
            background: #fff;
        }

        /* 当前时间样式 */
        #current-time {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="clock-ring"></div>
    <div id="clock-pointer"></div>
    <div id="current-time"></div>
</body>
</html>

3. 因为数字的量太大，采用js动态生成数字

// 获取圆环元素
const clockRing = document.getElementById('clock-ring');

// 动态生成数字
for (let i = 1; i <= 12; i++) {
    // 创建一个数字元素
    const clockNumber = document.createElement('div');

    // 设置数字元素的样式
    clockNumber.classList.add('clock-number');

    // 设置数字元素的内容
    clockNumber.textContent = i;

    // 将数字元素添加到圆环中
    clockRing.appendChild(clockNumber);
}

4. js生成数字

// 获取当前时间
const currentTime = new Date();

// 获取小时、分钟和秒
const hours = currentTime.getHours();
const minutes = currentTime.getMinutes();
const seconds = currentTime.getSeconds();

// 计算时钟指针应该旋转的角度
const angle = (hours * 30) + (minutes * 0.5) + (seconds * 0.00833);

// 设置时钟指针的旋转角度
const clockPointer = document.getElementById('clock-pointer');
clockPointer.style.transform = `rotate(${angle}deg)`;

// 设置当前时间
const currentDateTime = document.getElementById('current-time');
currentDateTime.textContent = `${hours}:${minutes}:${seconds}`;