Layui数据表格每一行动态显示倒计时

最新推荐文章于 2023-05-08 14:25:14 发布

小彩虹冲鸭

最新推荐文章于 2023-05-08 14:25:14 发布

阅读量1.3k

点赞数 5

分类专栏： # Layui 文章标签： Layui 数据表格倒计时动态

原文链接：https://blog.csdn.net/fengchen0123456789/article/details/103201170

版权

Layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

声明

本文转载自 fengchen0123456789 的以下博客

https://blog.csdn.net/fengchen0123456789/article/details/103201170

出于个人需求，我已略微修改代码，修改结果如下

需求描述

每个文件提交后，需要在3天内完成审批操作，并动态显示倒计时。
超过3天未完成审批的，显示“已逾期”

后端接口

访问后端接口【http://w.x.y.z:8080/file/list】，获取文件列表数据，
返回的结果格式如下：（仅参考格式）

{
    "code": 0,
    "data": [
        {
            "name": "事假",//文件名称
            "id": 146, //文件ID
            "pushTime": 1611714619000 //提交申请的时间，毫秒值表示
        },
        {
            "name": "请假条",
            "id": 133,
            "pushTime": 1611711730000
        },
        {
            "name": "请假条",
            "id": 142,
            "pushTime": 1611644857000
        },
        {
            "name": "病假",
            "id": 145,
            "pushTime": 1611624655000
        }
    ],
    "msg": "已查询到请假申请数据！",
    "count": 4
}

前端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui的数据表格中显示倒计时</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../static/css/layui.css"  media="all">
</head>
<body>
<!-- 数据表格 -->  
<table class="layui-hide" id="demo"></table>
<script src="../static/layui.js" charset="utf-8"></script>
<script>
layui.use(['util', 'table'], function(){
  $ = layui.jquery;
  var  util = layui.util
     ,table = layui.table;
  
  //展示 文件数据
  table.render({
    elem: '#demo'
	,url: 'http://w.x.y.z:8080/file/list'  
    ,cols: [[ //标题栏
       {field: 'id', title: 'ID', align:"center"}
      ,{field: 'name', title: '文件名称', align:"center"}
	  ,{field: 'pushTime', title: '申请时间', width: 220, align:"center"
		  ,templet: function(a){
			  var longstr = a.pushTime;
			  // datetimeFormat()将毫秒值转为时间字符串，代码在下方112-177行
			  return datetimeFormat(longstr);
		  }
		  ,align:"center"
	   }
	  ,{field: 'Countdown', title: '倒计时',
			templet: function (a) {
			  // 在提交时间上 延长3天, 再把 毫秒 转为 秒
			  var endTime = Math.floor((a.pushTime + 3*24*60*60*1000) / 1000);
			  // 计算 剩下的秒，即留给审批的时间
			  var t = endTime - Math.floor(new Date().getTime() / 1000);
			  // 设置每一条数据唯一的key
			  var key = 'key_' + a.id;
			  // 判断是否逾期
			  if(t <= 0){
				  //已逾期，直接返回，提示已逾期
				  return `<label  id=${key}>已逾期</label>`;
			  } 
			  //未逾期 > 开始处理剩余时间，将秒转为n日n时n分n秒的形式，代码在下方88-108行
			  var left_time =  secondToStr(t); 
			  var html = `<label id=${key} style="color: red;">${left_time}</label>`;
			  addTask(key, function () {
				 t--;
				 var left =  secondToStr(t);  
				 $('#' + key).text(left);
				 if (t == 0) {
				    //倒计时结束，删除定时任务
					$('#' + key).text("已逾期");
					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];
  } 
  // 剩余秒 转化为 剩余日时分秒
  function secondToStr(t){
  	  //日
      var left_day = parseInt(t / ( 60 * 60 * 24));
      //时
  	  var left_hour = parseInt((t % ( 60 * 60 * 24)) / (60 * 60));
      if (left_hour < 10) {
        left_hour = "0" + left_hour;
      }
  	  //分
      var left_minute = parseInt((t%3600) /60);
      if (left_minute < 10) {
        left_minute = "0" + left_minute;
      }
  	  //秒
      var left_second = t % 60;
      if (left_second < 10) {
        left_second = "0" + t % 60;
      }
      return left_day+"天 "+left_hour+"时 "+left_minute+"分 "+left_second+"秒";
  }
  /*  倒计时相关 结束 ↑↑↑ */	
});
</script>
<script>
    /*
	 * 时间格式化工具
	 * 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期
	 */
	function datetimeFormat(longTypeDate) {
		if(longTypeDate==null){
			return "";
		}
		var dateTypeDate = "";
		var date = new Date();
		date.setTime(longTypeDate);
		dateTypeDate += date.getFullYear();   //年
		dateTypeDate += "-" + getMonth(date); //月
		dateTypeDate += "-" + getDay(date);   //日
		dateTypeDate += "&nbsp;" + getHours(date);   //时
		dateTypeDate += ":" + getMinutes(date);     //分
		dateTypeDate += ":" + getSeconds(date);     //秒
		return dateTypeDate;
	}
	//返回  月份
	function getMonth(date) {
		var month = "";
		month = date.getMonth() + 1; //getMonth()得到的月份是0-11
		if (month < 10) {
			month = "0" + month;
		}
		return month;
	}
	//返回 日期
	function getDay(date) {
		var day = "";
		day = date.getDate();
		if (day < 10) {
			day = "0" + day;
		}
		return day;
	}
	//小时
	function getHours(date) {
		var hours = "";
		hours = date.getHours();
		if (hours < 10) {
			hours = "0" + hours;
		}
		return hours;
	}
	//分
	function getMinutes(date) {
		var minute = "";
		minute = date.getMinutes();
		if (minute < 10) {
			minute = "0" + minute;
		}
		return minute;
	}
	//秒
	function getSeconds(date) {
		var second = "";
		second = date.getSeconds();
		if (second < 10) {
			second = "0" + second;
		}
		return second;
	}	
</script>
</body>
</html>

最终效果

如下面2个图所示，倒计时在动态的变化。
在这里插入图片描述

小彩虹冲鸭

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
Layui数据表格每一行动态显示倒计时

目录声明需求描述后端接口前端代码最终效果声明本文转载自 fengchen0123456789 的以下博客https://blog.csdn.net/fengchen0123456789/article/details/103201170出于个人需求，我已略微修改代码，修改结果如下需求描述每个文件提交后，需要在3天内完成审批操作，并动态显示倒计时。超过3天未完成审批的，显示“已逾期”后端接口访问后端接口【http://w.x.y.z:8080/file/list】，获取文件列表数据，返
复制链接

扫一扫

专栏目录