本篇文章為大家展示了怎么在vue中實(shí)現(xiàn)一個LED數(shù)字時鐘效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括南明網(wǎng)站建設(shè)、南明網(wǎng)站制作、南明網(wǎng)頁制作以及南明網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，南明網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到南明省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

實(shí)現(xiàn)思路

每一個數(shù)字由七個元素構(gòu)成，即每一個segment元素。0~9 的數(shù)字都有自己的構(gòu)成方式，用數(shù)組表示，即digitSegments數(shù)組。例如：

數(shù)字0用數(shù)組表示就是[1,2,3,4,5,6]，定時器每隔一秒獲取最新時間，然后通過改變透明度將之前的數(shù)字消失，顯示最新的數(shù)字。通過transition展示動態(tài)效果。

代碼細(xì)節(jié)

setNumber 方法用來設(shè)置數(shù)字 ，方法中第一個判斷用于清除之前顯示的數(shù)字，第二個判斷用于顯示最新的數(shù)字，當(dāng)初始化時間時，會進(jìn)第二個判斷。樣式有些丑，可以自己修改，年月日 的顯示也可使用 正常的數(shù)字顯示。

實(shí)現(xiàn)代碼

  .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;
          }
        } 
      }
    }
  }

上述內(nèi)容就是怎么在vue中實(shí)現(xiàn)一個LED數(shù)字時鐘效果，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。