纯净、安全、绿色的下载网站

首页

当前位置:首页IT学院IT技术

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

进击的_菜鸡   2021-05-20 我要评论
想了解vue实现指定日期之间的倒计时的相关内容吗,进击的_菜鸡在本文为您仔细讲解vue指定日期之间倒计时的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue指定日期倒计时,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;
      }
    }
  };

相关文章

猜您喜欢

  • Keras载入mnist数据集出错 怎样解决Keras载入mnist数据集出错的问题

    想了解怎样解决Keras载入mnist数据集出错的问题的相关内容吗,半闲居士吃螃蟹在本文为您仔细讲解Keras载入mnist数据集出错的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Keras,载入mnist,数据集出错,下面大家一起来学习吧。..
  • vue 骨架屏 vue项目中使用骨架屏的方法

    想了解vue项目中使用骨架屏的方法的相关内容吗,赏花赏景赏时光在本文为您仔细讲解vue 骨架屏的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,骨架屏,下面大家一起来学习吧。..

网友评论

Copyright 2022 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们