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;

}

}

};

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

以上是 vue实现指定日期之间的倒计时 的全部内容, 来源链接: utcz.com/p/220528.html

回到顶部