html中倒计时实现

1：通用的执行方式

数据列的渲染方式，这里用的layui

这个方法在其他地方也能用，这里的定时器是dom的方法，也是网上很多案例的写法，比较通用

{
                title: '倒计时', field: 'toTriggerTimeMin', templet: function (d) {
                    //秒
                    let dtt = d.toTriggerTimeMin;
                    // 设置唯一id
                    let testKey = d.id;
                    if (dtt <= 0) {
                        return `<label  id=${testKey}>已结束</label>`;
                    }
                    //未结束
                    //这一步其实可以先把最开始的时间填充上，根据情况选择是否填充数据
                    let html = `<label id=${testKey} style="color: red;">加载中</label>`;
                    joinTask(testKey, function () {
                        //秒数减少
                        dtt--;
                        //获取时间、赋值
                        let str = formatDateStr(dtt);
                        $('#' + testKey).text(str);
                        if (dtt <= 0) {
                            //倒计时结束，删除任务
                            $('#' + testKey).text("已结束");
                            delTask(testKey);
                        }
                    });
                    return html;
                }
            },

里面的几个核心方法

//1：存储任务的集合
var tasks = new Map();
//3：dom定时器方法（函数，延时时间）
setInterval(function () {
    //循环执行任务集合中全部方法
    for (let key in tasks) {
        tasks[key]();
    }
}, 1000)

//2：添加任务
function joinTask(key, value) {
    if (typeof value === "function") {
        tasks[key] = value;
    }
}

//4：删除任务
function delTask(task) {
    delete tasks[task];
}

// 把秒转换为想要的格式
function formatDateStr(t) {
    //日
    let left_day = parseInt(t / (60 * 60 * 24));
    //时
    let left_hour = parseInt((t % (60 * 60 * 24)) / (60 * 60));
    if (left_hour < 10) {
        left_hour = "0" + left_hour;
    }
    //分
    let left_minute = parseInt((t % 3600) / 60);
    if (left_minute < 10) {
        left_minute = "0" + left_minute;
    }
    //秒
    let left_second = t % 60;
    if (left_second < 10) {
        left_second = "0" + t % 60;
    }
    return left_day + "天 " + left_hour + "时 " + left_minute + "分 " + left_second + "秒";
}

 

效果

 

 

2：layui自身方法

如果是layui框架的话，其实可以用它本身的倒计时方法

数据列的写法

{
                title: '倒计时', field: 'scoreDate', templet: function (d) {
                    //这里换了一种写法，这里传过来的是具体的日期，如：2022-01-01 15:30:00
                    let t = d.scoreDate;
                    // 设置唯一的key
                    let key = d.conditionId;
                    if (t <= 0) {
                        return `<label  id=${key}>已结束</label>`;
                    }
                    //未结束
                    let html = `<label id=${key} style="color: red;">加载中</label>`;
                    //调用倒计时方法
                    setCountdown(t,key)
                    return html;
                }
            }

方法：这里的方法是从官网上拿过来的

    // 倒计时

var util = layui.util;

    function setCountdown(value, indexId) {
        let formatDate1 = formatDate(value);
        let endTime = new Date(formatDate1); // 结束日期
        let serverTime = new Date(); // 假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
        util.countdown(endTime, serverTime, function (date, serverTime, timer) {
            let str = date[0] + ' 天 ' + date[1] + ' 时 ' + date[2] + ' 分 ' + date[3] + ' 秒';
            $('#' + indexId).html(str);
        });
    }

效果