前言

学习知识确实最有效的方法就是实践，就如同通过制作一个有意思的时钟来掌握前端三件套的知识。

在这个过程中，我们不仅仅是在机械地完成一个任务，更是在亲身体验和探索中深入理解每一个技术点的应用。从构建时钟的结构开始，用 HTML搭建起框架；运用 CSS赋予其美观的外观和布局；再通过 JavaScript赋予其灵动的生命，让时间实时跳动。

实操效果

屏幕截图 2024-04-20 203720.png

实操部分

html部分

首先时钟由一个上表面、一个下表面、六条时刻线和时针分针秒针组成。

clock盒子包括两个表面
- outer-clock-face（下表面)
  - marking marking-one（时刻线）
  - marking marking-two（时刻线）
  - marking marking-three（时刻线）
  - marking marking-four（时刻线）
  - 伪元素::before（时刻线）
  - 伪元素::after（时刻线）
- inner-clock-face(上表面)
  - hand hour-hand（时钟）
  - hand min-hand（分钟）
  - hand second-hand（秒针）

通过上面的分析我们可以清楚的写出html结构框架

<div class="clock">
    <div class="outer-clock-face">
        <div class="marking marking-one"></div>
        <div class="marking marking-two"></div>
        <div class="marking marking-three"></div>
        <div class="marking marking-four"></div>
        <div class="inner-clock-face">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
        </div>
    </div>
</div>

css部分

为什么有一些div盒子有两个类名而且还有一个共同的类名呢？

这是为了简化css代码也便于修改代码。可以用一个共同拥有的类名写一些共同具有的样式，再用不同的类名写一些不一样的样式。

主要部分：

用border-radius: 50%;生成圆形

通过绝对定位居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

伪元素，用于创建一个时钟的外观

.outer-clock-face::before,
.outer-clock-face::after {
     /* 指定了伪元素的内容,将内容设置为空字符串，因为我们可能会使用其他方式来添加时钟的指针或数字 */
    content: '';
    width: 10px;
    height: 100%;
    background: white;
    /* 因为伪元素是行内元素,为了布局改成块级元素 */
    display: block;
    border-radius: 10px;
    /* 居中操作*/
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.outer-clock-face::after {
    /* 绕z轴旋转90度 */
    transform: rotate(90deg);
    /* 旋转基点 */
    transform-origin: center center;
}

JavaScript部分

首先获取.second-hand元素、.min-hand元素和.hour-hand元素。
通过Date对象的getSeconds()、getMinutes()和getHours()元素获取当前的时分秒
通过计算得出旋转角度，再用
```
style.transform = `rotate(${角度}deg)`
```
修改css样式，使指针的旋转角度发生变化
设置一个定时器，一秒刷新一次指针的旋转角度

var secondHand = document.querySelector('.second-hand');
var minHand = document.querySelector('.min-hand');
var hourHand = document.querySelector('.hour-hand');

function setTime() {
    var now = new Date();     //获取到当前时间

    //读取秒针
    var seconds = now.getSeconds()
    var secondsDegrees = seconds * 6 + 90
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`

    //读取分针
    var mins = now.getMinutes()
    var minsDegrees = mins * 6 + 90
    minHand.style.transform = `rotate(${minsDegrees}deg)`

    //读取时针
    var hours = now.getHours()
    var hoursDegrees = hours * 30 + 90 + mins * 0.5
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
}

//定时器
setInterval(setTime, 1000)

结尾

每一次的调试、改进，都是对知识的巩固和深化。这种实践让理论不再抽象，让我们真正将所学知识融会贯通，并且在解决实际问题时能够得心应手。实践是知识的催化剂，让我们在制作时钟的有趣过程中，不断提升自己的技能和理解能力。

前端三件套实践：反方向的钟

前言

实操效果

实操部分

html部分

css部分

JavaScript部分

结尾