倒计时,解决UI不刷新的问题

//启动定时器
this.task = setInterval(() => {
this.autoUpdateStatus();
}, 1000);

autoUpdateStatus() {
if(this.product.status && this.product.status === ‘2’) {
this.product.statusText = ‘直播已结束’;
//删除定时器
clearInterval(this.task);
} else {
let startDate = this.product.startDate;
let endDate = this.product.endDate;

  let start = this.$moment(startDate, 'YYYY-MM-DD HH:mm:ss');
  let end = this.$moment(endDate, 'YYYY-MM-DD HH:mm:ss');
  let now = new Date();
  if(start.isAfter(now)) {
	//预告
	this.product.status = '0';
	//直播未开始时,显示开播倒计时
	//注意,毫秒是13位数字
	//计算毫秒的差值
	let milliseconds = start.valueOf() - now.getTime();
	let day = Math.floor(milliseconds / 1000 / 3600 / 24);
	let hour = Math.floor(milliseconds / 1000 / 3600 - day * 24);
	let minute = Math.floor(milliseconds / 1000 / 60 - day * 24 * 60 - hour * 60);
	let second = Math.floor(milliseconds / 1000 - day * 24 * 3600 - hour * 3600 - minute * 60);
	this.product.statusText = '仅剩' + (day == 0? '': day + '天') + hour + '小时' + minute + '分' + second + '秒开播';
  } else if(end.isBefore(now)) {
	//直播结束
	this.product.status = '2';
	this.product.statusText = '直播已结束';
	//删除定时器
	clearInterval(this.task);
  } else {
	//直播中
	this.product.status = '1';
	//正在直播时,显示直播结束倒计时
	//注意,毫秒是13位数字
	//计算毫秒的差值
	let milliseconds = end.valueOf() - now.getTime();
	let day = Math.floor(milliseconds / 1000 / 3600 / 24);
	let hour = Math.floor(milliseconds / 1000 / 3600 - day * 24);
	let minute = Math.floor(milliseconds / 1000 / 60 - day * 24 * 60 - hour * 60);
	let second = Math.floor(milliseconds / 1000 - day * 24 * 3600 - hour * 3600 - minute * 60);
	this.product.statusText = '仅剩' + (day == 0? '': day + '天') + hour + '小时' + minute + '分' + second + '秒直播结束';
  }
}

//强制刷新UI,否则倒计时看不到效果
this.$forceUpdate();

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值