Vue编写炫酷的时钟插件

本文实例为大家分享了Vue编写时钟插件的具体代码，供大家参考，具体内容如下效果图代码奉上：templatedivclass=clockdivclass=flip...

本文实例为大家分享了vue编写时钟插件的具体代码，供大家参考，具体内容如下

效果图

代码奉上：

<template>
  <div class="clock">
    <div class="flip">
      <div class="digital front" :data-number="nextTimes[0]"></div>
      <div class="digital back" :data-number="nowTimes[0]"></div>
    </div>
    <div class="flip">
      <div class="digital front" :data-number="nextTimes[1]"></div>
      <div class="digital back" :data-number="nowTimes[1]"></div>
    </div>
    <em class="divider">:</em>
    <div class="flip">
      <div class="digital front" :data-number="nextTimes[2]"></div>
      <div class="digital back" :data-number="nowTimes[2]"&gphpt;</div>
    </div>
    <div class="flip">
      <div class="digital front" :data-number="nextTimes[3]"></div>
      <div class="digital back" :data-number="nowTimes[3]"></div>
    </div>
    <em class="divider">:</em>
    <div class="flip">
      <div class="digital front" :data-number="nextTimes[4]"></div>
      <div class="digital back" :data-number="nowTimes[4]"></div>
    </div>
    <div class="flip">
      <div class="digital front" :data-number="nextTimes[5]"></div>
      <div class="digital back" :data-number="nowTimes[5]"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ClockData",
    data () {
      return {
        duration: 650,
        nowTimes: [],
        nextTimes: [],
        timer: {},
      }
    },
    mounted() {
      this.initDate();
      this.timer = setInterval(() => {
        this.updateTime();
      }, 1000)
    },
    methods: {
      initDate() {
        let now = new Date();
        this.nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
        this.nextTimes = this.getTimeFromDate(now);
      },
      updateTime() {
        let now = new Date();
        let nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
        let nextTimes = this.getTimeFromDate(now);;
        for (let i = 0; i < 6; i++) {
          if (nowTimes[i] !== nextTimes[i]) {
            this.setSpin(i, nowTimes[i], nextTimes[i]);
          }
        }
      },
      setSpin(index, nowTime, nextTime) {
        let nodes = document.querySelectorAll(".flip");
        nodes[index].classList.add('running');
        this.nowTimes.splice(index, 1, nowTime);
        this.nextTimes.splice(index, 1, nextTime);
        setTimeout(() => {
          nodes[index].classList.remove('running');
          this.nowTimes.splice(index, 1, nextTime);
        }, this.duration)
      },
      getTimeFromDate(date) {
        let numTime = [];
        let timeStr = date
          .toTimeString()
          .slice(0, 8)
          .split(":")
          .join("");
        for (let i = 0; i < timeStr.length; i++) {
          numTime.push(parseInt(timeStr[i]));
        }
        return numTime;
      }
    },
    destroyed() {
      // 销毁定时器
      clearInterval(this.timer);
    }
  }
</script>

<style scoped>
  .clock {
    display: Flex;
  }
  .clock .divider {
    font-size: 66px;
    line-height: 102px;
    font-style: normal;
  }
  .clock .flip {
    position: relative;
    width: 60px;
    height: 100px;
    margin: 2px;
    font-size: 66px;
    line-height: 100px;
    text-align: center;
    background: white;
    border: 1px solid black;
    border-radius: 12px;
  }
  .clock .flip .digital::before, .clock .flip .digital::after {
    position: absolute;
    content: attr(data-number);
    left: 0;
    right: 0;
    color: white;
    background: black;
    overflow: hidden;
    -webkit-perspective: 160px;
    perspective: 160px;
  }
  .clock .flip .digital::before {
    top: 0;
    bottom: 50%;
    border-bottom: 1px solid #666;
    border-radius: 10px 10px 0 0;
  }
  .clock .flip .digital::after {
    top: 50%;
    bottom: 0;
    line-height: 0;
    border-radius: 0 0 10px 10px;
  }
  .clock .flip .back::before,
  .clock .flip .front::after {
    z-index: 1;
  }
  .clock .flip .back::after {
    z-index: 2;
  }
  .clock .flip .front::before {
    z-index: 3;
  }
  .clock .flip .back::after {
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: rotateX(0.5turn);
    transform: rotateX(0.5turn);
  }
  .clock .flip.running .front::before {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation: frontFlipDown 0.6s ease-in-out;
    animation: frontFandroidlipDown 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .clock .flip.running .back::after {
    -webkit-animation: backFlipDown 0.6s ease-in-out;
    animation: backFlipDown 0.6s ease-in-out;
  }
  @-webkit-keyframes frontFlipDown {
    to {
      -webkit-transform: rotateX(0.5turn);
      transform: rotateX(0.5turn);
    }
  }
  @keyframes frontFlipDown {
    to {
      -webkit-transform: rotateX(0.5turn);
      transform: rotateX(0.5turn);
    }
  }
  @-webkit-keyframes backFlipDown {
    to {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
    }
  }
  @keyframes backFlipDown {
    to {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
    }
  }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。