layui 渲染表格给每一行设置一个倒计时

深藏阁楼爱情的钟 2023-06-15 12:26 37阅读 0赞

**场景，后台返回的数据有一个时间字段，往后延迟多少分钟要触发某个事件，如超过了时间就显示为0**

## 表格渲染的代码如下，其他参数省略 ##

table.render({ 
       cols: [[
             { 
                		field: 'time',
                        width: 200,
                        title: '倒计时',
                        templet: function (a) { 
                         // 根据后端返回的时间在延长 10分钟,计算出还剩下多少秒
                          var t = (a.time+ 60 * 10) - Math.floor(new Date().getTime() / 1000);
                          // 设置每一条数据唯一的key
                          var key = 'key_' + a.status;
                          // 分钟
                          var minute1 = Math.floor(t / 60);
                          // 秒数
                          var second1 = t % 60;
                          if (minute1 < 10) { 
                            minute1 = "0" + Math.floor(t / 60);
                          }
                          if (second1 < 10) { 
                            second1 = "0" + t % 60;
                          }
                          var time2 = minute1 + ":" + second1;
                          // 这里初始值计算显示的倒计时只是为了 如页面有刷新操作，只是把这个初始值也显示为倒计时
                          var html = `<label id=${ key} style="color: red;">${ time2}</label>`;
                          if (t <= 0) { 
                            return `<label id=${ key}>0</label>`;
                          }
                          addTask(key, function () { 
                            t--;
                            var minute = Math.floor(t / 60);
                            var second = t % 60;
                            if (minute < 10) { 
                              minute = "0" + Math.floor(t / 60);
                            }
                            if (second < 10) { 
                              second = "0" + t % 60;
                            }
                            $('#' + key).text(minute + ":" + second);
                            if (t == 0) { 
                              $('#' + key).text("0");
                              delTask(key);
                              // 倒计时到执行的操作
                              ...........
                            }
                          });
                          return html;
                        }
             }
             ]],
        });

## 外部定时器代码 ##

***这里都没有去测试性能的，只是实现的思路，使用时请评估***

// 该map可以定义在最上面
    	  var tasks = new Map();
     	  // 定时计时任务，这里是1秒执行一次
          setInterval(function () { 
            for (var key in tasks) { 
              tasks[key]();
            }
          }, 1000)
          // 添加定时任务
          function addTask(key, value) { 
            if (typeof value === "function") { 
              tasks[key] = value;
            }
          }
          // 删除定时任务
          function delTask(task) { 
            delete tasks[task];
          }

***展示的页面如下***  
![在这里插入图片描述][20191122153512483.png]  
`注意，为了防止tasks元素都删除完了抛异常，所以我们把setInterval定时器写在表格渲染时的done里面，写个判断`  
**把上面的setInterval去掉，定义一个变量 var timer = -1;**

done: function (res, curr, count) { 
                if (Object.keys(tasks).length > 0) { 
                  if (-1 == timer) { 
                    timer = setInterval(function () { 
                      for (var key in tasks) { 
                        tasks[key]();
                      }
                    }, 1000)
                  }
                } else { 
                  if (-1 != timer) { 
                    clearInterval(timer);
                    timer = -1;
                  }
                }
              }

## 倒计时显示 ##

// 倒计时时间格式化【00:00】
    	  function timeFormat(times){ 
    	    var minute = Math.floor(times / 60);
    	    var second = times % 60;
    	    if (minute < 10) { 
    	      minute = "0" + Math.floor(times / 60);
    	    }
    	    if (second < 10) { 
    	      second = "0" + times % 60;
    	    }
    	    return minute + ":" + second;
    	  }
    	  
    	//根据秒数生成倒计时格式【0天00：00:00】
          function timerFormat(t) { 
            var  leftd = Math.floor(t/(3600*24)),  //计算天
                    lefth = Math.floor(t/3600%24),  //计算小时数
                    leftm = Math.floor(t/60%60),  //计算分钟数
                    lefts = Math.floor(t%60);  //计算秒数
            if(lefth<10){ 
              lefth = "0" + lefth;
            }
            if(leftm<10){ 
              leftm = "0" + leftm;
            }
            if(lefts<10){ 
              lefts = "0" + lefts;
            }
            return  leftd + "天" + lefth + ":" + leftm + ":" + lefts
          }

[20191122153512483.png]: https://img-blog.csdnimg.cn/20191122153512483.png