摘要 今天小编跟大家讲解下有关一个简易的 LED 数字时钟Js实现方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关一个简易的

今天小编跟大家讲解下有关一个简易的 LED 数字时钟Js实现方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关一个简易的 LED 数字时钟Js实现方法 的相关资料，希望小伙伴们看了有所帮助。

这个应该是已经有很多人做过的东西 我应该只是算手痒 想写一下 所以 花了点时间折腾了这个 顺便把 Dark Mode 的处理也加上了。

首先可以很明确的一点 这个真没技术含量存在 只是需要点耐心。

LED 数字包含了左右各两条线 中间三条线 一共7条线。所以 为了能够更容易辨识 在写 demo 的时候 我直接这样写了。

<div class="digital digital_0"> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="l1"></span> <span class="l2"></span> <span class="r1"></span> <span class="r2"></span></div>

至于digital_0这个的作用 其实很简单 就是控制从 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,.digital_0 .c2 { animation: changeDigital 200ms 0ms 1 ease-in forwards;}

这里使用了一个 animation 动画 并且时间是200ms 主要是为了让某些部分消失的时候 有一个过渡效果。

@keyframes changeDigital { form { opacity: 1; } to { opacity: 0; }}

那么剩下来的就是最需要耐心的地方了 调整控制那7条线的位置 同时还要考虑每条线是带有斜角的 而且还稍微有点圆弧的感觉。带点圆弧的感觉那么直接使用border-radius就可以了 至于那个斜角的话 如果各位知道 css 中用边框画三角的方法 那么就应该明白怎么做这个斜角了。

当我们要画三角的时候 width和height都是为0 然后用过控制border-width而得到最终的三角的大小 那么这里如果我们根据线条的位置 适当选择width和height有具体的值 是不是就有斜角的感觉了呢。

接着 需要注意横着的中间那根线 也就是.c2这个元素 线条两边是三角突出的 可以实现的方式也很多 这里我选择使用:after和:before相叠加。

最后就是对每个元素的位置做调整 控制好大小位置就可以了 因为是使用定位的方式来操作 所以 调整起来还是很简单的。

.digital span { position: absolute; border-radius: 50vh; box-sizing: border-box;}.digital .c1,.digital .c2,.digital .c3 { height: 0; width: 26px; border-left: 4px solid transparent; border-right: 4px solid transparent;}.digital .c1 { top: 0; left: 0; border-top: 4px solid currentColor;}.digital .c2 { top: 50%; left: 0; margin-top: -2px;}.digital .c2:before,.digital .c2:after { content: ""; height: 0; width: 24px; border-left: 2px solid transparent; border-right: 2px solid transparent; box-sizing: border-box;}.digital .c2:before { position: absolute; top: 0; left: -3px; border-bottom: 2px solid currentColor;}.digital .c2:after { position: absolute; top: 2px; left: -3px; border-top: 2px solid currentColor;}.digital .c3 { bottom: 0; left: 0; border-bottom: 4px solid currentColor;}.digital .l1,.digital .l2 { height: 21px; width: 0; left: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 4px solid currentColor;}.digital .l1 { top: 1px; border-top-width: 4px;}.digital .l2 { top: 24px; border-bottom-width: 4px;}.digital .r1,.digital .r2 { height: 21px; width: 0; right: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-right: 4px solid currentColor;}.digital .r1 { top: 1px; border-top-width: 4px;}.digital .r2 { top: 24px; border-bottom-width: 4px;}

做完这些 剩下的就是简单的对外层元素做点优化 比如稍微倾斜一点。

.digital { position: relative; width: 26px; height: 46px; margin-left: 10px; transform: skew(-6deg);}

哦 忘了说了 这里的边框颜色我选择使用currentColor的方式 这样可以在暗黑模式切换的过程中 只需要修改body中的文字颜色和背景色就可以了。currentColor会选择文字颜色来使用。

样式处理完之后 接着就是添加点 js 来显示时钟了 只要把两个数字整出来放到不同的div中就好了。这里我取个位数的时候 是用m%10的方式取余；取十位数的时候是通过parseInt(m/10)的方式取整。取出来之后分别放到想对应的div中就 ok 了。

完整代码如下：

样式：

body { color: #393e4d; background-color: #f5f5f5;}@media screen and (prefers-color-scheme: dark) { body { color: #59f6fb; background-color: #1c1b1e; }}.digital { position: relative; width: 26px; height: 46px; margin-left: 10px; transform: skew(-6deg);}.digital span { position: absolute; border-radius: 50vh; box-sizing: border-box;}.digital .c1,.digital .c2,.digital .c3 { height: 0; width: 26px; border-left: 4px solid transparent; border-right: 4px solid transparent;}.digital .c1 { top: 0; left: 0; border-top: 4px solid currentColor;}.digital .c2 { top: 50%; left: 0; margin-top: -2px;}.digital .c2:before,.digital .c2:after { content: ""; height: 0; width: 24px; border-left: 2px solid transparent; border-right: 2px solid transparent; box-sizing: border-box;}.digital .c2:before { position: absolute; top: 0; left: -3px; border-bottom: 2px solid currentColor;}.digital .c2:after { position: absolute; top: 2px; left: -3px; border-top: 2px solid currentColor;}.digital .c3 { bottom: 0; left: 0; border-bottom: 4px solid currentColor;}.digital .l1,.digital .l2 { height: 21px; width: 0; left: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 4px solid currentColor;}.digital .l1 { top: 1px; border-top-width: 4px;}.digital .l2 { top: 24px; border-bottom-width: 4px;}.digital .r1,.digital .r2 { height: 21px; width: 0; right: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-right: 4px solid currentColor;}.digital .r1 { top: 1px; border-top-width: 4px;}.digital .r2 { top: 24px; border-bottom-width: 4px;}.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,.digital_0 .c2 { animation: changeDigital 200ms 0ms 1 ease-in forwards;}@keyframes changeDigital { form { opacity: 1; } to { opacity: 0; }}.clock { display: flex; justify-content: center; padding-top: 20px;}.gap { height: 46px; padding-left: 10px; font-size: 50px; font-weight: bold; line-height: 0.8; transform: skew(-6deg);}

结构：

<div class="clock"> <div class="digital digital_0"> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="l1"></span> <span class="l2"></span> <span class="r1"></span> <span class="r2"></span> </div> <div class="digital digital_0"> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="l1"></span> <span class="l2"></span> <span class="r1"></span> <span class="r2"></span> </div> <div class="gap">:</div> <div class="digital digital_0"> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="l1"></span> <span class="l2"></span> <span class="r1"></span> <span class="r2"></span> </div> <div class="digital digital_0"> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="l1"></span> <span class="l2"></span> <span class="r1"></span> <span class="r2"></span> </div> <div class="gap">:</div> <div class="digital digital_0"> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="l1"></span> <span class="l2"></span> <span class="r1"></span> <span class="r2"></span> </div> <div class="digital digital_0"> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <span class="l1"></span> <span class="l2"></span> <span class="r1"></span> <span class="r2"></span> </div></div>

js：

var s1 = document.getElementsByClassName("digital")[5], s2 = document.getElementsByClassName("digital")[4], m1 = document.getElementsByClassName("digital")[3], m2 = document.getElementsByClassName("digital")[2], h1 = document.getElementsByClassName("digital")[1], h2 = document.getElementsByClassName("digital")[0];setInterval(function(){ var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); if (h < 10) { h1.className = 'digital digital_' + h; h2.className = 'digital digital_0'; } else { h1.className = 'digital digital_' + parseInt(h%10); h2.className = 'digital digital_' + parseInt(h/10); } if (m < 10) { m1.className = 'digital digital_' + m; m2.className = 'digital digital_0'; } else { m1.className = 'digital digital_' + parseInt(m%10); m2.className = 'digital digital_' + parseInt(m/10); } if (s < 10) { s1.className = 'digital digital_' + s; s2.className = 'digital digital_0'; } else { s1.className = 'digital digital_' + parseInt(s%10); s2.className = 'digital digital_' + parseInt(s/10); }}, 1000)

这样一个简易的 LED 数字时钟就大功告成啦。

来源：爱蒂网