前言
1、根据list数组里面的开始时间,判断倒计时逻辑
2、思路=>forEach遍历数组时间,设置新对象属性接收当前时间,设置新对象属性保存倒计时
效果如下图所示
实现
- 数据data
list:[
{
id:33,
url: 'https://192.168.20.15/httpflv/94.flv',
coverUrl:'https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg',
name: '001手术室',
monitor_id:1,
startTime:'2021/5/17 19:52',
operTitle:"海军总医院机器人肝胆胰内科手术直播现场-手术室一主治医生增晓先"
},
{
id:333,
url: 'https://192.168.20.15/httpflv/94.flv',
coverUrl:'https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg',
name: '001手术室',
monitor_id:1,
startTime:'2021/5/18 10:50:50',
},
],
timer:{},// 倒计时
startTime:{},// 保存开始时间
daojishi:{},// 保存返回的倒计时时间
- 保存开始时间
// 组件创建 mounted钩子函数时
this.list.forEach(item => {
this.timeOut(item.startTime)
});
// this.startTime对象中添加`date`+'a'的独有标志属性(保证属性不会发生重复),保存开始时间值
timeOut(date){
this.$set(this.startTime,`${date}a`,date);
this.outTime(this.startTime[date+'a'])
},
- 倒计时逻辑处理(优化前代码,方便理解)
outTime(date){
let leftTime = new Date(date).getTime() - new Date().getTime(); //计算剩余的毫秒数
let days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
let hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
let minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
let seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = this.paddingZero(days);
hours = this.paddingZero(hours);
minutes =this.paddingZero(minutes);
seconds =this.paddingZero(seconds);
// 如果存在,清除倒计时数据
if(this.timer[date+'a']){
clearTimeout(this.timer[date+'a']);
}
// 定义属性保存返回的倒计时
this.$set(this.daojishi,`${date}a`,null);
if (leftTime >= 0) {
this.$set(this.timer,`${date}a`,null);
this.timer[date+'a'] = setTimeout(()=>{this.outTime(date)}, 1000);
if(days=='00'){
this.daojishi[date+'a'] = hours+'h '+minutes+'m'
}else{
this.daojishi[date+'a'] = days+'d '+hours+'h '+minutes+'m'
}
}else{
this.daojishi[date+'a'] = '手术进行中'
}
},
paddingZero(i) { //将0-9的数字前面加上0,例1变为01
return i < 10 ? "0" + i : i;
},
4.组件渲染
// 获取daojishi对象中的[item.startTime+'a']属性
<span v-show="daojishi[item.startTime+'a']!='手术进行中'">倒计时 {{daojishi[item.startTime+'a']}}</span>