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

实现思路

每一个数字由七个元素构成，即每一个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:0 0px;
      position:relative;
      display:inline-block;
      .segment {
 background:#00DCFF;
 border-radius:5px;
 position:absolute;
 opacity:0.15;
 transition:opacity 0.2s;
 -webkit-transition:opacity 0.2s;
 -ms-transition:opacity 0.2s;
 -moz-transition:opacity 0.2s;
 -o-transition:opacity 0.2s;
      }
      .segment.on, .separator {
 opacity:1;
 box-shadow:0 0 50px rgba(255,0,0,0.7);
 transition:opacity 0s;
 -webkit-transition:opacity 0s;
 -ms-transition:opacity 0s;
 -moz-transition:opacity 0s;
 -o-transition:opacity 0s;
      }
      .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:opacity 0.2s;
     -webkit-transition:opacity 0.2s;
     -ms-transition:opacity 0.2s;
     -moz-transition:opacity 0.2s;
     -o-transition:opacity 0.2s;
   }
   .segment.on, .separator {
     opacity:1;
     box-shadow:0 0 50px rgba(255,0,0,0.7);
     transition:opacity 0s;
     -webkit-transition:opacity 0s;
     -ms-transition:opacity 0s;
     -moz-transition:opacity 0s;
     -o-transition:opacity 0s;
   }
   .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数字时钟效果（开箱即用），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！