Vue簡單實現LED數字時鐘（升級版）

效果圖

實現思路

---

LED中每個數字由七個元素構成，0~9 的數字都有本身的構成方式，用數組表示，即numList數組。例如

數字0用數組表示就是[0,1,2,3,4,5]，同時每一個數字對應numList數組的索引值。定時器每隔一秒獲取最新時間，而後經過改變透明度將以前的數字消失，顯示最新的數字。

實現代碼

template

js

css

實現代碼（開箱即用）

<template>
  <div class="clock">
    <div class="digit hours" v-for="(item, index) in hours">
      <div v-for="(items, index) in item" :class="{'segment': true,'activate': items}"></div>
    </div>
    <div class="separator"></div>
    <div class="digit hours" v-for="(item, index) in minute">
      <div v-for="(items, index) in item" :class="{'segment': true,'activate': items}"></div>
    </div>
    <div class="separator"></div>
    <div class="digit hours" v-for="(item, index) in second">
      <div v-for="(items, index) in item" :class="{'segment': true,'activate': items}"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'clock',
  data() {
    return {
     hours: [],
     minute: [],
     second: [],
     numList: [ // 數字對應的顯示
       [0,1,2,3,4,5],
       [1,2],
       [0,1,3,4,6],
       [0,1,2,3,6],
       [1,2,5,6],
       [0,2,3,5,6],
       [0,2,3,4,5,6],
       [0,1,2],
       [0,1,2,3,4,5,6],
       [0,1,2,5,6]
     ]
    }
  },
  mounted() {
    this.clockData();
    setInterval(() => {
      this.clockData();
    }, 1000);
  },
  methods: {
    clockDisplay(arr, num) {
      arr.forEach((el_i, i) => {
           el_i.forEach((el_j, j) => {
              this.numList[String(num)[i]].forEach((el_k, k) => {
                if (el_k === j) {
                  el_i[j] = true;
                }
              })
           })
        })
      return arr
    },
    clockData() {
      const p = s => {return s < 10 ? '0' + s: s;} // 時間不足10位補0
      const myDate     = new Date()
      const getHours   = p(myDate.getHours());   // 時
      const getMinutes = p(myDate.getMinutes()) // 分
      const getSeconds = p(myDate.getSeconds()) // 秒
      const arrs  = Array.from(new Array(2),() => new Array(7).fill(0))
      this.hours  = this.clockDisplay(JSON.parse(JSON.stringify(arrs)), getHours)
      this.minute = this.clockDisplay(JSON.parse(JSON.stringify(arrs)), getMinutes)
      this.second = this.clockDisplay(JSON.parse(JSON.stringify(arrs)), getSeconds)
    }
  }
}
</script>

<style lang="stylus">
body
  background #ccc
  box-sizing border-box
.clock
  width 820px
  background #000
  position relative
  padding 10px
  margin 0 auto
  overflow hidden
  .digit
    width 100px
    height 220px
    position relative
    float left
    margin 10px
    box-sizing border-box;
    padding 5px
    .segment.activate
      opacity 1
      box-shadow:0 0 50px rgba(255,0,0,0.7);
      transition:opacity 0.2s;
    .segment
      background #00DCFF
      border-radius 5px 
      position absolute
      opacity:0.15;
    .segment:nth-child(1),.segment:nth-child(4),.segment:nth-child(7)
      width 90px
      height 10px
    .segment:nth-child(2),.segment:nth-child(3)
      right 0
      width 10px
      height 100px
    .segment:nth-child(5),.segment:nth-child(6)
      left 0
      width 10px
      height 100px
    .segment:nth-child(1)
      top 0
    .segment:nth-child(2),.segment:nth-child(6)
      top 10px
    .segment:nth-child(3),.segment:nth-child(5)
      top 120px
    .segment:nth-child(4)
      top 220px
    .segment:nth-child(7)
      top 110px
  .separator
    width 20px
    height 220px
    float left
    margin 15px
    position relative
    &:before
      content ''
      display inline-block
      width 20px
      height 20px
      background #00DCFF
      border-radius 50%
      position absolute
      top 50px
      left 0
    &:after
      content ''
      display inline-block
      width 20px
      height 20px
      background #00DCFF
      border-radius 50%
      position absolute
      bottom 50px
      left 0
</style>
複製代碼