1.安装moment.js
npm install moment
复制代码
2.在页面上引入;
- 可以把倒计时写在一个组件上,然后单独只在组件中引入
const moment = require('moment');
复制代码
- 也可以在main.js中引入,然后放到Vue得原型链上;(我使用得是这种)
const moment = require('moment');
Vue.prototype.$moment = moment;
复制代码
3.从后台获取得到开始时间戳(startTime)和结束时间戳(endTime),并判断是否在活动范围内
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.把时间写在页面上
<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>
复制代码