如何对比HTML时间与当前时间并改颜色？求补全JS判断条件

没问题，咱们一步步来搞定这个需求。核心思路是把表格里的时间字符串转换成可对比的数值，再和当前时间的数值做比较，就能轻松判断时间是否已经过去。

具体实现逻辑 #

1. 先把当前时间转换成总分钟数（小时×60 + 分钟），方便后续对比
2. 提取每个td.time里的时间字符串（比如"06:30"），按冒号分割成小时和分钟，同样转换成总分钟数
3. 对比两个总分钟数：如果表格里的时间总分钟数小于当前时间的，就说明这个时间已经过去了，把文字设为红色

完整的JavaScript代码 #

var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var currentTotalMinutes = h * 60 + m; // 当前时间转总分钟数
var x = document.getElementsByClassName("time");

for (var i = 0; i < x.length; i++) {
    // 拆分表格中的时间字符串，转成数字
    var timeParts = x[i].textContent.split(":");
    var tdHours = parseInt(timeParts[0], 10);
    var tdMinutes = parseInt(timeParts[1], 10);
    var tdTotalMinutes = tdHours * 60 + tdMinutes;

    // 这里就是你要的判断条件
    if (tdTotalMinutes < currentTotalMinutes) {
        x[i].style.color = "red";
    }
}

补充说明 #

• 这段代码默认所有时间都是当天的时间，如果涉及跨天场景（比如第二天凌晨的时间），需要额外添加日期判断逻辑
• 使用parseInt(xxx, 10)是为了确保按十进制解析数字，避免以0开头的小时数被误判为八进制

内容的提问来源于stack exchange，提问作者mrk