如何将 html 时间与当前时间进行比较并更改颜色

Question

所以我在td标签中有一个不同时间的表。我想将 tds 中的时间与当前时间进行比较，并且根据这一点，我想通过 javascript 更改颜色：

你能告诉我在我的代码底部的 if 参数/比较中必须放什么吗？

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>FlightNr</th>
                        <th>from</th>
                        <th>scheduled</th>
                        <th>Gate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>KP7809</td>
                        <td>Queilén</td>
                        <td class="time">06:30</td>
                        <td>M13</td>
                    </tr>
                    <tr>
                        <td>BR2168</td>
                        <td>Gargazzone/Gargazon</td>
                        <td class="time">07:45</td>
                        <td>N12</td>
                    </tr>
                    <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">08:50</td>
                        <td>X58</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var x = document.getElementsByClassName("time");
    for (var i = 0; i < x.length; i++) {
        if(time in td tags are older than current time)
        x[i].style.color ="red";
    }
</script>

Answer 1

您必须将值从字符串转换为 int。在此之后，您可以将其与当前时间进行比较。因此，您的循环将如下所示：

var hoursInTd = parseInt(x[i].innerText.split(':')[0]) 
var minutesInTd = parseInt(x[i].innerText.split(':')[1])
if (hoursInTd > h) {
   // hours in td are later
   x[i].style.color ="red";
} else if (hoursInTd === h && minutesInTd > m) {
   // hours are same, but the minutes are later
   x[i].style.color ="red";
}

希望对您有所帮助。

Answer 2

我使用时间戳来比较当前日期和您想要的日期。请注意，我假设桌子上的日期是今天的同一天。干杯。

var now = new Date();   
var timeContainers = document.getElementsByClassName("time");
for (var i = 0; i < timeContainers.length; i++) {
   var [hours,minutes] = timeContainers[i].innerHTML.split(':');
   var dateToCompare = new Date(now.getFullYear(),now.getMonth(),now.getDate(),Number(hours),Number(minutes))
    if(now.valueOf() - dateToCompare.valueOf() > 0){
      timeContainers[i].style.color='red';
    }
}

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>FlightNr</th>
                        <th>from</th>
                        <th>scheduled</th>
                        <th>Gate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>KP7809</td>
                        <td>Queilén</td>
                        <td class="time">06:30</td>
                        <td>M13</td>
                    </tr>
                    <tr>
                        <td>BR2168</td>
                        <td>Gargazzone/Gargazon</td>
                        <td class="time">07:45</td>
                        <td>N12</td>
                    </tr>
                    <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">08:50</td>
                        <td>X58</td>
                    </tr>
                     <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">18:50</td>
                        <td>X58</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 3

将

时间转换为日期对象，并将其与当前日期进行比较。

var now = new Date();
    var x = document.getElementsByClassName("time");
    for (var i = 0; i < x.length; i++) {
        var time = new Date(Date.parse('01/01/2011'+ ' ' + x[i].innerHTML))
        if(time < now){
        console.log(x[i].innerHTML)
            x[i].style.color = "red";
        }
        
    }

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>FlightNr</th>
                        <th>from</th>
                        <th>scheduled</th>
                        <th>Gate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>KP7809</td>
                        <td>Queilén</td>
                        <td class="time">06:30</td>
                        <td>M13</td>
                    </tr>
                    <tr>
                        <td>BR2168</td>
                        <td>Gargazzone/Gargazon</td>
                        <td class="time">07:45</td>
                        <td>N12</td>
                    </tr>
                    <tr>
                        <td>GN5746</td>
                        <td>Surat</td>
                        <td class="time">08:50</td>
                        <td>X58</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>