广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现指定日期之间的倒计时
  • 256
分享到

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

2024-04-02 19:04:59 256人浏览 泡泡鱼
摘要

本文实例为大家分享了Vue实现指定日期之间倒计时的具体代码,供大家参考,具体内容如下 效果图如下 此处使用moment.js日期处理类库 使用方法如下 npm install mo

本文实例为大家分享了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;
      }
    }
  };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现指定日期之间的倒计时

本文链接: https://www.lsjlt.com/news/126373.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作