×

vue开发小应用:指定日期之间的倒计时

作者:Web前端之家2021.06.18来源:Web前端之家浏览:641评论:0
关键词:js

分享个vue开发小应用:指定日期之间的倒计时,一起来看下吧。

先看下效果图:

123.jpg

此处使用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;
      }
    }
  };

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20210618.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 大吨位油缸

    谷歌浏览器使用起来很快,没有乱七八糟的插件。www.sdlyxt.com...

  • Web前端之家

    可以加Q群...

  • 访客

    JS点击锚点实现平滑滚动能写一个备注呗,有点看不懂,谢谢...

  • alice

    试用了下,vee-validate挺好用的!...

  • 访客

    封装思路跟原生javascript基本差不多。...

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria