JavaScript实现抖音罗盘时钟

下面我将详细讲解如何用JavaScript实现抖音罗盘时钟。

准备工作

在编写JavaScript代码之前，我们需要先准备好HTML和CSS文件。HTML文件中包含了页面布局的基本结构，CSS文件中定义了页面对应的样式。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抖音罗盘时钟实现</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="center">
        <div id="hour" class="hand hour-hand"></div>
        <div id="minute" class="hand min-hand"></div>
        <div id="second" class="hand second-hand"></div>
        <div class="number-12 number"><span>12</span></div>
        <div class="number-1 number"><span>1</span></div>
        <div class="number-2 number"><span>2</span></div>
        <div class="number-3 number"><span>3</span></div>
        <div class="number-4 number"><span>4</span></div>
        <div class="number-5 number"><span>5</span></div>
        <div class="number-6 number"><span>6</span></div>
        <div class="number-7 number"><span>7</span></div>
        <div class="number-8 number"><span>8</span></div>
        <div class="number-9 number"><span>9</span></div>
        <div class="number-10 number"><span>10</span></div>
        <div class="number-11 number"><span>11</span></div>
    </div>
    <script src="app.js"></script>
</body>
</html>

.center {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 20px solid #eee;
    margin: 50px auto;
    position: relative;
}
.number {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.number-12 {
    top: 30%;
}
.number-1 {
    top: 40%;
    left: 80%;
}
.number-2 {
    top: 50%;
    left: 90%;
}
.number-3 {
    top: 60%;
    left: 95%;
}
.number-4 {
    top: 70%;
    left: 90%;
}
.number-5 {
    top: 80%;
    left: 80%;
}
.number-6 {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.number-7 {
    top: 80%;
    left: 20%;
}
.number-8 {
    top: 70%;
    left: 10%;
}
.number-9 {
    top: 60%;
    left: 5%;
}
.number-10 {
    top: 50%;
    left: 10%;
}
.number-11 {
    top: 40%;
    left: 20%;
}
.hand {
    position: absolute;
    width: 10px;
    height: 50%;
    background-color: #333;
    transform-origin: bottom center;
    transition: all .05s;
    transition-timing-function: cubic-bezier(.1, 2.7, 0.58, 1);
}
.hour-hand {
    height: 30%;
    z-index: 3;
    background-color: #333;
}

在HTML文件中，我们创建了一个div元素，名为“center”，并将其样式设置为：

宽度和高度均为400px
边框颜色为灰色（#eee），边框粗细为20px
圆角半径为50%
居中对齐

同时，我们在div元素中嵌套了12个div元素，每个元素都代表了一个数字。并且给每个数字块添加了一个类名，用来设置样式。

在CSS文件中，我们对各个元素的样式进行了定义。其中：

.number-12表示数字12的样式
.hand表示时针、分针、秒针的样式
.hour-hand表示时针的样式

实现代码

以下是实现抖音罗盘时钟的JavaScript示例代码：

const hourHand = document.querySelector('#hour');
const minHand = document.querySelector('#minute');
const secondHand = document.querySelector('#second');

function setDate() {
  const now = new Date();
  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
  minHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);

我们首先使用querySelector()方法在HTML页面中获取到了三个div元素，分别代表时针、分针和秒针。之后，我们定义了setDate()函数，用来更新每个针所指的位置。

在setDate()函数中，我们先获取当前的时间（now），然后根据当前时间计算出时针、分针、秒针所要指向的角度（hourDegrees、minsDegrees和secondsDegrees）。具体的计算方式是：

秒针指向的角度为 secondsDegrees = ((seconds / 60) * 360) + 90
分针指向的角度为 minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90
时针指向的角度为 hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90

最后，我们使用setInterval()方法来每秒钟调用一次setDate()函数，来更新针的位置。

示例说明

示例一

假设当前时间是下午2点30分30秒，此时时针应该指向2，分针应该指向6，秒针应该指向180度。

根据计算公式，时针应该指向的角度为 ((hour / 12) * 360) + ((mins / 60) * 30) + 90 = ((14 / 12) * 360) + ((30 / 60) * 30) + 90 = 150℃，分针指向的角度为 ((mins / 60) * 360) + ((seconds / 60) * 6) + 90 = (30 / 60) * 360 + (30 / 60) * 6 + 90 = 195℃，秒针指向的角度为 ((seconds / 60) * 360) + 90 = (30 / 60) * 360 + 90 = 270℃。

因此，根据以上示例，我们可以检验代码是否正确。

示例二

我们可以通过修改CSS样式，来实现抖音罗盘时钟的变化。下面是针的动画效果示例：

.hand {
  animation: shake 0.05s ease-in-out infinite;
}

@keyframes shake {
  0% {
    transform: rotateZ(-15deg);
  }
  25% {
    transform: rotateZ(15deg);
  }
  50% {
    transform: rotateZ(-15deg);
  }
  75% {
    transform: rotateZ(15deg);
  }
  100% {
    transform: rotateZ(-15deg);
  }
}

我们向需要抖动的元素上添加一个动画样式animation: shake 0.05s ease-in-out infinite;，并在CSS文件中定义@keyframes shake这个动画，设置元素的抖动效果。这会让指针像抖音效果一样，动态地抖动起来。

如下面这个示例：https://codepen.io/cathy-lin/pen/JjNNrqj