vue实现指定日期之间的倒计时

本文实例为大家分享了vue实现指定日期之间倒计时的具体代码，供大家参考，具体内容如下

效果图如下

此处使用moment.js日期处理类库 使用方法如下

npm install moment 或者 yarn add moment

html

<div class="time-down">
  <div class="back">{{dayNum}}</div>
  <div class="font-14 date">天</div>
  <div class="back">{{hourNum}}</div>
  <div class="font-14 date">时</div>
  <div class="back">{{minuteNum}}</div>
  <div class="font-14 date">分</div>
  <div class="back">{{secondNum}}</div>
  <div class="font-14 date">秒</div>
</div>

js

import moment from 'moment';
export default {
    name: 'TimeRangPage',
    props: {
      startTime: String,
      endTime: String
    },
    data () {
      return {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        timeSetInterval: null,
        showTimeDown: false,
        showOver: false
      };
    },
    created () {
      if (moment(new Date()).isBefore(this.startTime)) {
        this.showTimeDown = true;
        this.timeDown();
      }
      if (moment(new Date()).isAfter(this.endTime)) this.showOver = true;
    },
    methods: {
      timeDown () {
        this.timeSetInterval = setInterval(() => {
          if (moment(this.startTime).isBefore(moment())) {
            this.showTimeDown = false;
            clearInterval(this.timeSetInterval);
            location.reload();
          }
          let dur = moment.duration(moment(this.startTime) - moment(), 'ms');
          this.days = dur.get('days');
          this.hours = dur.get('hours');
          this.minutes = dur.get('minutes');
          this.seconds = dur.get('seconds');
        }, 1000);
      }
    },
    computed: {
      dayNum () {
        if (this.days < 10) return '0' + this.days;
        return this.days;
      },
      hourNum () {
        if (this.hours < 10) return '0' + this.hours;
        return this.hours;
      },
      minuteNum () {
        if (this.minutes < 10) return '0' + this.minutes;
        return this.minutes;
      },
      secondNum () {
        if (this.seconds < 10) return '0' + this.seconds;
        return this.seconds;
      }
    }
  };

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