vue 实现LED数字时钟效果（开箱即用）

2023-08-04 21:05:05 76

实现思路

每一个数字由七个元素构成，即每一个segment元素。0~9的数字都有自己的构成方式，用数组表示，即digitSegments数组。例如：

数字0用数组表示就是[1,2,3,4,5,6]，定时器每隔一秒获取最新时间，然后通过改变透明度将之前的数字消失，显示最新的数字。通过transition展示动态效果。

代码细节

setNumber方法用来设置数字，方法中第一个判断用于清除之前显示的数字，第二个判断用于显示最新的数字，当初始化时间时，会进第二个判断。样式有些丑，可以自己修改，年月日的显示也可使用正常的数字显示。

实现代码





.clock{
height:140px;
background:#000;
position:absolute;
top:50%;
left:50%;
//width:900px;
margin-left:-450px;
margin-top:-100px;
text-align:center;
.intervalPoint{
display:inline-block;
height:100px;
.separator{
width:20px;
height:20px;
background:#00DCFF;
border-radius:50%;
display:block;
position:relative;
margin-bottom:20px;
}
}
.digit{
width:80px;
height:140px;
margin:00px;
position:relative;
display:inline-block;
.segment{
background:#00DCFF;
border-radius:5px;
position:absolute;
opacity:0.15;
transition:opacity0.2s;
-webkit-transition:opacity0.2s;
-ms-transition:opacity0.2s;
-moz-transition:opacity0.2s;
-o-transition:opacity0.2s;
}
.segment.on,.separator{
opacity:1;
box-shadow:0050pxrgba(255,0,0,0.7);
transition:opacity0s;
-webkit-transition:opacity0s;
-ms-transition:opacity0s;
-moz-transition:opacity0s;
-o-transition:opacity0s;
}
.segment:nth-child(1){
top:10px;
left:16px;
right:16px;
height:10px;
}
.segment:nth-child(2){
top:20px;
right:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(3){
bottom:20px;
right:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(4){
bottom:10px;
right:16px;
height:10px;
left:16px;
}
.segment:nth-child(5){
bottom:20px;
left:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(6){
top:20px;
left:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(7){
bottom:95px;
bottom:calc(50%-5px);
right:19px;
left:19px;
height:10px;
}
}
.systemTime-main{
display:inline-block;
.systemTime-title{
background-color:rgb(255,166,75);
font-size:30px;
width:200px;
text-align:center;
margin-left:calc(50%-100px);
}
.systemTime-date{
.date-numble{
width:60px;
height:100px;
margin-right:-10px;
display:inline-block;
position:relative;
.segment{
background:#00DCFF;
border-radius:5px;
position:absolute;
opacity:0.15;
transition:opacity0.2s;
-webkit-transition:opacity0.2s;
-ms-transition:opacity0.2s;
-moz-transition:opacity0.2s;
-o-transition:opacity0.2s;
}
.segment.on,.separator{
opacity:1;
box-shadow:0050pxrgba(255,0,0,0.7);
transition:opacity0s;
-webkit-transition:opacity0s;
-ms-transition:opacity0s;
-moz-transition:opacity0s;
-o-transition:opacity0s;
}
.segment:nth-child(1){
top:10px;
left:16px;
right:16px;
height:10px;
}
.segment:nth-child(2){
top:20px;
right:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(3){
bottom:20px;
right:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(4){
bottom:10px;
right:16px;
height:10px;
left:16px;
}
.segment:nth-child(5){
bottom:20px;
left:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(6){
top:20px;
left:10px;
width:10px;
height:75px;
height:calc(50%-20px);
}
.segment:nth-child(7){
bottom:95px;
bottom:calc(50%-5px);
right:19px;
left:19px;
height:10px;
}
}
}
}
}

总结

以上所述是小编给大家介绍的vue实现LED数字时钟效果（开箱即用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 实现LED数字时钟效果（开箱即用）

热门推荐

随机推荐