传统手艺不能丢啊，小玩意练练手。今天创建一个简单的HTML5时钟，涉及到HTML、CSS和JavaScript的综合运用。下面是一个基本的示例，展示了如何实现一个实时更新的数字时钟。

1. 没有钟还转什么：先完成页面布局设计

话不多说，开始分析。能不能转先不论，先考虑如何实现页面布局来完成这样一个时钟。引入眼帘的当然是一个圆，毕竟是传统的时钟，方形和其他各异的形状也有，只不过我们没有那个艺术细菌啊，况且任务量明显无法衡量。

首先清理出我们的画布。

css

复制代码
* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

1.1 外圈

写个div，加上boder作为表框，里面套个div，最后贴个图。

ruby

复制代码
<div class="clock"> //钟表框架
    <div class="outer-clock-face"> // 外圈
            
    </div>
</div>

接下来就是里面的刻度了，这里我们使用div来完成。

xml

复制代码
<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>
</div>

四个div让它们进行相应角度的旋转就可以得到八个刻度

css

复制代码
.marking-one {
    /* 旋转角度 */
    transform: rotate(30deg);
}

.marking-two {
    transform: rotate(60deg);
}

.marking-three {
    transform: rotate(120deg);
}

.marking-four {
    transform: rotate(150deg);
}

剩下的俩个四个刻度使用伪元素选择器来实现。

css

复制代码
.outer-clock-face::before,
.outer-clock-face::after {
    content: '';
    width: 8px;
    height: 100%;
    background-color: #596235;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    border-radius: 8px;
}

1.2 里圈

与成果对比，发现里面再放个小圈就可以把过长的刻度遮住，从而实现钟表刻度的效果。所以这一步我们来完成里圈的处理。

xml

复制代码
<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 minute-hand"></div>
            <div class="hand second-hand"></div>
        </div>
    </div>
</div>

现在来看，我们的刻度也像模像样。还剩下里面的三个指针，也是使用div实现。

css

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

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

.minute-hand {
    width: 38%;
    height: 3px;
    margin-top: -1.5px;
    background-color: #6c6868;
}

2. 跑起来的才叫钟表：写点 JS 实现

到了这一步，我们的钟表已经基本完成了，剩下的就是让它动起来。先实现秒针：

2.1 获取秒针元素

ini

复制代码
var secondHand = document.querySelector('.second-hand');

2.2 定义一个 setDate 方法

javascript

复制代码
function setDate() {
    //拿到当前时间
    var now = new Date();

    //读秒
    var seconds = now.getSeconds();

    //计算旋转角度
    var secondsDeg = ((seconds / 60) * 360 + 90);

    //设置秒针角度
    secondHand.style.transform = `rotate(${secondsDeg}deg)`; // 字符串模板
    
}

后面的分针、时针也都大同小异，只有时针是十二个刻度一圈，略作修改就行。到此为止，我们的小钟表就完成咯，去看看效果吧！最后希望继续加油，日积月累。

源文：还真有人[送钟]炫技昂？

如有侵权请联系站点删除！