手把手教你用 CSS 打造一款小巧的桌面时钟🥰

前言

虽然三月份疯狂投简历，但是到目前为止除了做了一些笔试之外，没有收到任何面试。因此，我现在是一边投简历一边闲下来做做其他事情，比如此文中即将要实现的一款桌面时钟，也可称作数字时钟。

分析实现过程

看到效果图，我们先来分析一下这款时钟应该如何去实现。第一眼望去，可以看出有三个大盒子分别放着时、分、秒。如果再看的仔细一点，能看到在每个盒子下存在倒影。

因此，我们可以将它分为如下几个部分。

时钟结构

按照上面的结果图，我们可以清晰地将基本骨架搭建好。

相关代码如下：

<div id="clock">
      <h2>现在是北京时间</h2>
      <div id="time">
        <div><span id="hour">00</span><span>Hours</span></div>
        <div><span id="minutes">00</span><span>Minutes</span></div>
        <div><span id="seconds">00</span><span>Seconds</span></div>
      </div>
</div>

在没有任何样式的衬托下，效果如上所示。我们用 span 元素将初始化的时、分、秒放起来，以便后面使用。这一部分比较简单，就是常见的布局过程。

设置时间

我们现在来设置一下时间。这一部分就和 JS 有关了。

相关代码如下：

 function twoNum(num){
            return num<10?`0${num}`:num
        }
        function clock(){
            let hours = document.getElementById('hour')
            let minutes = document.getElementById('minutes')
            let seconds = document.getElementById('seconds')
            let h= new Date().getHours()
            let m= new Date().getMinutes()
            let s= new Date().getSeconds()
            hours.innerHTML=twoNum(h)
            minutes.innerHTML=twoNum(m)
            seconds.innerHTML=twoNum(s)
        }
        setInterval(clock,1000)

定义一个 twoNum 函数，该函数的主要作用是格式化一下数字。若小于10，便在数字前加入0；大于10，正常显示。

定义一个 clock 函数，该函数的主要作用是返回日期和时间。像 new Date().getHours() 方法是获取指定日期和时间的小时数，getMinutes()、getSeconds() 同理。最后设置定时器执行 clock 函数即可。

样式布置

现在我们开始设置基础的样式。首先我们将它基础的布局呈现出来。通过 flex 布局方式将它排列好，然后设置好间距、大小、颜色等相关属性即可。

相关代码如下：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: black;
}
#clock h2{
    position: relative;
    display: block;
    color: #fff;
    text-align: center;
    margin: 10px 0;
    font-weight: 700;
    letter-spacing: 0.4em;
}
#clock #time{
    display: flex;
}
#clock #time div{
    position: relative;
    margin: 0 5px;
}
#clock #time div span{
    position: relative;
    display: block;
    width: 100px;
    height: 80px;
    background: skyblue;
    color: #fff;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    z-index: 10;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

这时候的效果如下所示：

在两个盒子之间的那根横线是如何实现的呢？其实这里通过 box-shadow 来实现的。我们可以看到在 span 里加入了 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); 这样一段样式，这段样式就是为它添加了横线的效果。

现在看感觉离最终效果还差得远，不急，我们现在来进行下一步——进阶调整。

相关代码如下：

#clock #time div span:nth-child(2){
    height: 30px;
    font-size: 4px;
    letter-spacing: 3px;
    font-weight: 500;
    z-index: 9;
    box-shadow: none;
    background: #127fd6;
    text-transform: uppercase;
}
#clock #time div:last-child span{
    background: #ff006a;
}
#clock #time div:last-child span:nth-child(2){
    background: #ec0062;
}

在这里，我们使用 nth-child 选择器获取指定 span 元素，对其进行最终的样式修改。我们指定每个 div 元素中的第二个 span 元素，即包裹 hours，minutes，seconds 的 span 元素，主要添加的是颜色和大小，将其变的更加合理，如下所示：

我们再选中最后一个 span 元素，即包裹 seconds 的 span 元素，让其变为指定颜色，因此效果如下所示：

最后，关于 css 部分还剩最后一个东西：加入倒影特效。我们在 div 元素添加 box-reflect 属性。

#clock #time div{
    position: relative;
    margin: 0 5px;
    -webkit-box-reflect: below 1px linear-gradient(transparent,#0004);
}

below 指的是倒影在对象的下边，1px 指的是倒影与对象之间的间隔，linear-gradient 指的是使用线性渐变创建遮罩图像。完成这些，一个倒影特效就展现出来了。下面是最终的效果。

总结

到这里就都完成啦，觉得还不错的就点个赞吧。整体而言并不难，其实这款时钟还可以再丰富，比如通过加上 3D 属性使其变成 3D 数字时钟，具体如何实现，感兴趣的朋友们可以去尝试一下。

往期回顾

支持一下吧~