前言

在这个数字时代，当我们用上自己亲手编码一个既美观又实用的网页时钟，那该有多大的成就感，这不仅能够提升我们的前端开发技能，还能满足自己的个性化需求，为个人项目或网站添上一抹独特的创意和技术风采。在接下来的内容中，我们将深入浅出，一步一步指导你如何从零开始，使用最基本的前端开发技术——HTML、CSS、JavaScript，结合现代的前端组件化思维，特别是BEM（Block Element Modifier）命名规则，打造一款专属的在线时钟。这个过程不仅是编写代码，更是一次探索美学与功能平衡的旅程，让你的设计理念与时间的流逝同频共振。

为什么选择 DIY 时钟项目？

技能提升：实践是学习的最好方式。通过这个项目，你可以巩固HTML的结构布局、深化CSS的样式控制，以及掌握JavaScript的动态交互技巧。
个性化定制：市面上的时钟千篇一律，而自己动手制作的时钟可以完全按照个人审美和功能需求来设计，展现独一无二的风格。
理解组件化开发：BEM命名规范强调模块化和可复用性，这对于理解现代前端框架中的组件化思想至关重要，有助于你在更大型的项目中游刃有余。

我们将如何开始？

第一步：规划布局（HTML）

使用HTML搭建时钟的基础框架，每个部分（时、分、秒）都将被设计成独立的区块，遵循BEM原则命名，便于后续的CSS和JS操作。

第二步：美化界面（CSS）

通过CSS，我们将赋予时钟视觉上的吸引力。利用BEM，确保样式模块化，易于管理和扩展。无论是极简主义的现代风，还是复古怀旧的风格，全凭你一手掌控。

第三步：注入生命（JavaScript）

利用JavaScript让时钟动起来，实时更新显示的时间。我们将学习如何使用setInterval函数定期执行时间更新逻辑，并通过DOM操作将新时间反映到页面上。

开始制作

规划布局（HTML）

首先，先来给我们自己的时钟规划布局，搭建基础框架，运用BEM国际命名规范

Block ： 可以表示为一个独立的功能区域和组件，我们就将他分出来。将整个表盘定为clock, 再将外表盘定为outer-clock-face,内表盘定为 inner-clock-face，这样大体的框架就出来了。
Element ： 而那些块内的组成部分，无法脱离块单独存在，我们将用双下划线__连接。比如：分钟的刻度clock__marking和时针、分针、秒针clock__hang
Modifier ： ：用于改变块或元素的外观或行为，通常用双短横线--连接。这里我们将改变分钟刻度clock__marking的角度和时针、分针、秒针clock__hang的粗细大小等，命名为clock__marking-one以及clock__hang-hour-hand等

而这里分钟的刻度clock__marking有相同的样式，我们将clock__marking来存放他们相同的样式和时针、分针、秒针clock__hang也是一样，分别用hour-hand、min-hand、second-hand来存放他们各自不同的样式。

具体代码如下：

<div class="clock">
        <div class="outer-clock-face"> 
            <!-- 分钟刻度 -->
            <div class="clock__marking marking-one"></div>
            <div class="clock__marking marking-two"></div>
            <div class="clock__marking marking-three"></div>
            <div class="clock__marking marking-four"></div>

            <!-- 时钟中心面盘 -->
            <div class="inner-clock-face">
                <!-- 时针、分针、秒针 -->
                <div class="clock__hang hour-hand"></div>
                <div class="clock__hang min-hand"></div>
                <div class="clock__hang second-hand"></div>
            </div>
        </div>
    </div>

美化界面（CSS）

全局样式 (*):
- 清除了所有元素的默认外边距和内边距，保证页面的一致性
```
* {
    margin: 0;
    padding: 0;
}
```
Body样式:
- 将body设置为弹性布局，让时钟居中显示。
- justify-content: center; 水平居中。
- align-items: center; 垂直居中。
- height: 100vh; 让页面高度充满视口，确保时钟可见。
```
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
```

.clock样式:

设置了时钟容器的宽高为300px，形成圆形基础。
添加了边框、圆角，以及背景图片，营造外观。
padding: 20px; 为内部元素留出空间。

.clock{
    width: 300px;
    height: 300px;
    border: 7px solid #ffebdb;
    border-radius: 50%;
    background-image: url(./img/1.jpg);
    background-size: 115%;
    padding: 20px;
}

.outer-clock-face样式:
- 完全填充父容器，准备作为表盘背景。
- 设置为相对定位，以便绝对定位子元素（刻度和指针）。
```
.outer-clock-face{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
}
```

.clock__marking样式:

定义了时钟刻度的基本样式，如宽度、颜色。
绝对定位并居中，准备旋转以形成刻度。
transform-origin设置变换中心点为自身中心。

.clock__marking{
    width: 3px;
    height: 100%;
    background-color: #596235;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
    border-radius: 80px;
    transform-origin: 50% 50%;
}

.marking-样式:

分别设置了四个主要刻度的旋转角度，形成时钟的小时标记。

.marking-one{
    transform: rotateZ(30deg);
}
.marking-two{
    transform: rotateZ(60deg);
}
.marking-three{
    transform: rotateZ(120deg);
}
.marking-four{
    transform: rotateZ(150deg);
}

伪元素(::before, ::after) :

创建额外的元素模拟表盘上的12点和6点的长刻度。
设置宽度、颜色，旋转其中一个以形成对称。

.outer-clock-face::before,
.outer-clock-face::after{
    content: '';
    width: 10px;
    height: 100%;
    background-color: #596235;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-radius: 80px;
}
.outer-clock-face::after{
transform: rotateZ(90deg);
}

.inner-clock-face样式:

形成时钟的内圈，包含背景色和图片。
使用translate使其完美居中于外圈内。

.inner-clock-face{
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 100%;
    background-color: #ffebdb;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
    background-image: url(./img/1.jpg);
    background-size: 126%;

}

.clock__hang样式:

为基础指针样式，如宽度、颜色、定位。
rotate(90deg) 初始旋转，使得指针从垂直开始。

.clock__hang{
    width: 30%;
    height: 6px;
    background-color: #b03715;
    position: absolute;
    top: 50%;
    right: 50%;
    border-radius: 80px;
    margin-top: -3px;
    transform: rotate(90deg);
    transform-origin: 100% 50%;
}

.second-hand, .min-hand样式:

分别定义秒针和分针的宽度、颜色和长度。
秒针更细，分针略粗，两者均通过宽度调整。
通过不同的margin-top调整垂直居中。

.second-hand{
    width: 45%;
    height: 2px;
    margin-top: -1px;
    background-color: #b3b3b3;
}
.min-hand{
    width: 40%;
    height: 8px;
    margin-top: -2px;
    background-color: #5e4343;
}

注入生命（JavaScript）

// 首先，选取页面上的三个元素，分别对应秒针、分针和时针
var secondHand = document.querySelector('.second-hand');
var minHand = document.querySelector('.min-hand');
var hourHand = document.querySelector('.hour-hand');

// 定义一个函数 setDate，用于更新时钟指针的位置
function setDate() {
    // 1. 获取当前的时间
    var now = new Date();
    
    // 2. 处理秒针
    // 获取当前秒数
    var seconds = now.getSeconds();
    // 计算秒针应旋转的角度，一分钟后旋转360度，所以一秒转6度，+90度是为了初始位置对齐
    var secondsDeg = ((seconds / 60) * 360) + 90;
    // 设置秒针的旋转角度
    secondHand.style.transform = `rotate(${secondsDeg}deg)`;

    // 3. 处理分针
    // 获取当前分钟数
    var minutes = now.getMinutes();
    // 分针一小时旋转360度，所以一分钟转6度，同样+90度对齐
    var minutesDeg = ((minutes / 60) * 360) + 90;
    // 设置分针的旋转角度
    minHand.style.transform = `rotate(${minutesDeg}deg)`;

    // 4. 处理时针
    // 获取当前小时数，需要注意的是getHours()得到的是24小时制的小时数
    var hours = now.getHours();
    // 时针12小时旋转360度，即一小时转30度，同样+90度对齐
    var hoursDeg = ((hours / 12) * 360) + 90;
    // 设置时针的旋转角度
    hourHand.style.transform = `rotate(${hoursDeg}deg)`;
}

// 5. 使用setInterval每隔1000毫秒（即1秒）调用一次setDate函数，实现时钟的动态更新
setInterval(setDate, 1000);

实时根据系统时间调整时钟指针的位置，通过计算每一秒、每一分、每一小时对应的旋转角度，然后利用CSS的transform: rotate()属性动态改变指针的方向，从而实现时钟的走动效果。

okok，来看看实际成果吧🥰🥰

可还行昂，喜欢的话自己也可以去DIY一个哦🥰(●'◡'●)

制作clock网页时钟：HTML5、CSS3与JavaScript实战解析

前言