vue中利用Moment.js写活动倒计时

1.安装moment.js

npm install moment
复制代码

2.在页面上引入;

• 可以把倒计时写在一个组件上，然后单独只在组件中引入

const moment = require('moment');
//moment() 当前时间
//moment().valueOf(); 当前时间的时间戳，毫秒
复制代码

• 也可以在main.js中引入，然后放到Vue得原型链上;(我使用得是这种)

const moment = require('moment');
Vue.prototype.$moment = moment;
//this.$moment() 当前时间
//this.$moment().valueOf(); 当前时间的时间戳，毫秒
复制代码

3.从后台获取得到开始时间戳（startTime）和结束时间戳（endTime），并判断是否在活动范围内

//this.showtime 为倒计时得时间戳
//this.status 为活动状态
let currentTime = this.$moment().valueOf();
if(currentTime < startTime){
    // 活动未开始   
    this.this.status = 0
    let t = startTime - currentTime;
    let time = setInterval(()=> {
        t -= 1000;
        this.showtime = t
    },1000)
}else if(currentTime > startTime && currentTime < endTime){
    // 活动正在进行中    
    this.status = 1;
    let t = endTime - currentTime;
    let time = setInterval(()=> {
        t -= 1000;
        this.showtime = t
    },1000)
}else{
    // 活动结束做操作
     this.status = 2;
}
复制代码

4.把时间写在页面上

//timeValue 这个filters是为了值小于10时，前面加上“0”；
//filters:{
//timeValue(val)
//{if(val<10) return '0'+val;
//return val;}
//}
<span class="remindtext">{{status == 0? '距开始还有':status == 1?'距结束仅剩':'活动已结束'}}</span>
<span class="times" v-if="status == 0 || status == 1">
    <b>{{$moment.duration(showtime).days() | timeValue}}</b>
    <b>天</b>
    <b>{{$moment.duration(showtime).hours() | timeValue}}</b>
    <b>:</b>
    <b>{{$moment.duration(showtime).minutes() | timeValue}}</b>
    <b>:</b>
    <b>{{$moment.duration(showtime).seconds() | timeValue}}</b>
</span>
复制代码