您的位置:首页 > 编程学习 > > 正文

vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)

更多 时间:2022-03-28 09:20:15 类别:编程学习 浏览量:979

vue 计算一段时间的月份和天数

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

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

效果图如下

vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)

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

npm install moment 或者 yarn add moment

html

  • <li class="time-down">
      <li class="back">{{dayNum}}</li>
      <li class="font-14 date">天</li>
      <li class="back">{{hourNum}}</li>
      <li class="font-14 date">时</li>
      <li class="back">{{minuteNum}}</li>
      <li class="font-14 date">分</li>
      <li class="back">{{secondNum}}</li>
      <li class="font-14 date">秒</li>
    </li>
    
  • 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;
          }
        }
      };
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue 倒计时
    您可能感兴趣