一个简单的LED数字钟实现方法

至于digital_0this的功能其实很简单，就是控制十个数字从0到9的变化而存在的。.digital_1.c1,.digital_1.c2,.digital_1.c3,.digital_1.l1,.digital_1.l2,.digital_2.l1,.digital_2.r2,.digital_3.l1,.digital_3.l2,.digital_4.c1,.digital_4.c3,.digital_4.l2,.digital_5.l2,.digital_5.r1,.digital_6.r1,.digital_7.c2,.digital_7.c3,.digital_7.l1,.digital_7.l2,.digital_9.l2,...@keyframeschangeDigital{形式{不透明度：1;}到{不透明度：0;}}然后剩下的就是最需要耐心的地方了，调整控制7条线的位置，还要考虑每条线是否有斜角和微圆角。如果觉得有点圆弧，可以直接使用border-radius。至于斜角，如果你知道如何在CSS中绘制带边框的三角形，那么你应该明白如何做这个斜角。当我们要画一个三角形的时候，宽高都是0，然后通过控制border-width得到最终的三角形大小，那么如果我们根据线条的位置选择合适的宽高就可以有具体的价值观，它感觉像一个斜面吗？接下来需要注意中间的横线，也就是.c2元素。线的两侧突出三角形，实现方式有很多种。这里我选择使用:after和:before进行叠加。最后就是调整每个元素的位置。控制大小和位置就够了。因为是定位操作，调整还是很简单的。.digitalspan{位置：绝对；边界半径：50vh；box-sizing:border-box;}.??digital.c1,.digital.c2,.digital.c3{height:0;宽度：26px；border-left:4pxsolidtransparent;border-right:4pxsolidtransparent;}.digital.c1{top:0;左：0；border-top:4pxsolidcurrentColor;}.digital.c2{top:50%;左：0；margin-top:-2px;}.digital.c2:before,.digital.c2:after{content:"";高度：0；宽度：24px；左边框：2px实心透明；border-right:2pxsolidtransparent;box-sizing:border-box;}.??digital.c2:before{position:absolute;顶部：0；左：-3px；border-bottom:2pxsolidcurrentColor;}.digital.c2:after{position:absolute;顶部：2px；左：-3px；border-top:2pxsolidcurrentColor;}.digital.c3{bottom:0;左：0；border-bottom:4pxsolidcurrentColor;}.digital.l1,.digital.l2{height:21px;宽度：0；左：0；border-top:2px实心透明；border-bottom:2px实心透明；博rder-left:4pxsolidcurrentColor;}.digital.l1{top:1px;border-top-width:4px;}.digital.l2{top:24px;border-bottom-width:4px;}.digital.r1,.digital.r2{height:21px;宽度：0；右：0；border-top:2px实心透明；border-bottom:2px实心透明；border-right:4pxsolidcurrentColor;}.digital.r1{top:1px;border-top-width:4px;}.digital.r2{top:24px;border-bottom-width:4px;}做完这些，剩下的就是简单优化外围元素，比如稍微倾斜一点。数字{位置：相对；宽度：26px；高度：46px；左边距：10px；transform:skew(-6deg);}哦，忘了说了，我这里的边框颜色选择使用currentColor，这样就可以在深色模式的切换过程中，只需要修改文字颜色和正文中的背景颜色。currentColor将选择要使用的文本颜色。样式处理完之后，接下来就是添加一些JS来显示时钟了。这个没什么好说的，直接把两个数字放到不同的div里就可以了。这里我取个位数的时候用m%10取余；当我取十位数时，我使用parseInt(m/10)进行四舍五入。取出来后，放到相应的div中就可以了。演示地址：http://lab.tianyizone.com/demo/digital_number.html