单个页面多个倒计时的逻辑处理（vue）

前言

1、根据list数组里面的开始时间，判断倒计时逻辑
2、思路=>forEach遍历数组时间，设置新对象属性接收当前时间，设置新对象属性保存倒计时
效果如下图所示

实现

1. 数据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:{},// 保存返回的倒计时时间

2. 保存开始时间

// 组件创建 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'])
    },

3. 倒计时逻辑处理（优化前代码，方便理解）

    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>