优雅时钟，纯JS实现"罗盘"转动效果

2023-10-19 21:20:24

罗盘时钟：用 JavaScript 制作时间的优雅展示

前言

罗盘时钟是一种迷人的时钟，以其精美的罗盘设计和优雅的旋转指针而著称。使用 JavaScript、HTML 和 CSS，我们可以轻松创建自己的罗盘时钟，将时间转化为一件真正的艺术品。

一、搭建基础

HTML 结构

<div id="clock">
    <div id="face">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
    </div>
</div>

这个结构创建了一个具有时钟表面的容器 #clock，该表面对应 #face 元素。表面对应不同的指针，表示时、分和秒。

CSS 样式

#clock {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 50%;
    position: relative;
}

#face {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hour-hand {
    width: 20px;
    height: 80px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom;
}

.minute-hand {
    width: 10px;
    height: 100px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom;
}

.second-hand {
    width: 5px;
    height: 120px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom;
}

这些样式定义了时钟的外观，使其具有圆形的表盘，带有黑色的时针和分针以及红色的秒针。

二、让时间动起来

JavaScript 代码

function updateClock() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    const hourAngle = (hours * 360 / 12) + (minutes / 60 * 30);
    const minuteAngle = (minutes * 360 / 60) + (seconds / 60 * 6);
    const secondAngle = seconds * 360 / 60;

    const hourHand = document.querySelector('.hour-hand');
    const minuteHand = document.querySelector('.minute-hand');
    const secondHand = document.querySelector('.second-hand');

    hourHand.style.transform = `rotate(${hourAngle}deg)`;
    minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
    secondHand.style.transform = `rotate(${secondAngle}deg)`;

    setTimeout(updateClock, 1000);
}

updateClock();

这段 JavaScript 代码获取当前时间，然后根据时、分和秒计算指针的角度。它使用 transform 属性旋转指针，使其以与实际时间相对应的速度移动。

三、优雅的时间显示

现在，你的罗盘时钟已经准备就绪，可以展示时间。你可以通过调整 CSS 样式来定制其外观，例如改变表盘的颜色、指针的形状或添加装饰。发挥你的创造力，制作出真正反映你风格和品味的罗盘时钟。

四、常见问题解答

如何更改时钟的大小？
调整 #clock 元素的 width 和 height 值以更改时钟的大小。
如何更改指针的颜色？
编辑 hour-hand、minute-hand 和 second-hand 类的 background-color 值以更改指针的颜色。
如何添加数字标记？
创建一个包含数字图像的元素并将其定位在表盘上。
如何更改旋转速度？
调整 setTimeout() 函数中的延迟时间（以毫秒为单位）以更改指针旋转的速度。
如何将时钟添加到我的网站？
将 HTML、CSS 和 JavaScript 代码复制到你的网站文件中，并将元素放置在所需位置。