Javascript 使用JS根据时间设置列的背景颜色

我有五列，每列都有不同的时间，我想在下一列中突出显示时间之前的列。它们都是按时间顺序排列的，从最早到最晚

为了说明这一点，A列的时间为上午8点，B列的时间为下午12点，C列的时间为下午3点，D列的时间为下午6点，E列的时间为晚上9点。因此，如果当前时间是下午2点，则应高亮显示B列，直到下午3点，此时C列将高亮显示

每一列都使用一个类定义，每次都从JSON文件中检索

我的理解是，我必须使用getElementsByCassName并在集合上迭代，因为每个结果都会生成一个集合。但是，这将针对所有列，而不仅仅是特定列

到目前为止，我的JavaScript代码就是这样。注意，我不是使用jQuery

Javascript

var h = addZero(currentDate.getHours());
var m = addZero(currentDate.getMinutes());
var s = addZero(currentDate.getSeconds());
var time = h + timeSeparator + m + timeSeparator + s;

if (time >= timetables[i].sunrise || time >= timetables[i].lunchtime) {
        var cols = document.getElementsByClassName('column');
            for (var i = 0; i < cols.length; i++) {
                cols[i].style.background = '#ba4346';
            }
        }

var h=addZero（currentDate.getHours（））；
var m=addZero（currentDate.getMinutes（））；
var s=addZero（currentDate.getSeconds（））；
var time=h+timeSeparator+m+timeSeparator+s；
如果（时间>=时间表[i]。日出时间>=时间表[i]。午餐时间）{
var cols=document.getElementsByClassName（'column'）；
对于（变量i=0；i

HTML

       <section id="times">
        <div class="container cf">
            <div class="column">
                <p id="sunrise">Sunrise</p>
                <div class="separator"></div>
                <p id="sunrise-time" class="time">undefined</p>
            </div>
            <div class="column">
                <p id="lunchtime">Lunchtime</p>
                <div class="separator"></div>
                <p id="lunchtime-time" class="time">undefined</p>
            </div>
        </div>
    </section>

日出

未定义
午餐时间

未定义

您可以使用.getHours（）函数 只需创建一个新的变量date，然后对其使用

.getHour（）

即可获得小时值

var d = new Date();
var h = d.getHours();
// and you have the current hours stored in a variable named h;

// now you can compare the hour with whatever you want and do whatever you want, e.g:
if (0 <= d <= 6 || 18 <= d <= 23) {
  alert("it's night.");
} else {
  alert("it's day.")
};


//changing background:
if (0 <= d <= 6 || 18 <= d <= 23) {
  document.getElementById("columnId").style.background = "blue";
} else {
  document.getElementById("column2Id").style.background = "yellow";
};

var d=新日期（）；
var h=d.getHours（）；
//将当前小时数存储在名为h的变量中；
//现在，您可以将小时与您想要的时间进行比较，并做您想要做的事情，例如：
如果（0基本上，你需要有一种“检查时间”的方法，它当前在每一列中

var cols = document.getElementsByClassName('column');
for(var i=0; i<cols.length; i++){
    //get the string from each column
    var colTime = cols[i].children[2].innerHTML
    if (colTime < currTime){
        cols[i].style.background = '#ba4346';
    }
}

var cols=document.getElementsByClassName（'column'）；
对于（var i=0；i，经过多次修补，我已经设法找到了自己的解决方案

对于每一列，我都分配了一个div ID，该ID允许每一列分别作为目标

<div class="column" id="sunrise">
    <p id="sunrise-caption">Sunrise</p>
    <div class="separator"></div>
    <p id="sunrise-time" class="time">undefined</p>
</div>

为了在v.s.epoch times列中保留易于阅读的时间格式，我使用
moment.unix
方法将epoch times格式设置为人类可读的格式

可能不是最干净的解决方案，但似乎效果不错。欢迎您提出建议。
addZero和timeSeparator的所有内容是什么？时间是字符串吗？如果是，您将无法将其与时间进行比较（假设这是
时间表中的内容）
）使用
=
。你也可以发布你的html吗？@thedarklord47只创建了一个时间字符串，比如00:58，是的，我现在就用它来更新帖子。因此
使用
class=“time”
是插入时间字符串的地方（代替未定义的）？如果你关心的只是可以使用
var hour=new Date的时间（）.getHours（）
现在，我的时区是下午5:12，这给了我
17
。使用0作为前缀将数字转换为字符串-数字在比较值时更容易使用，因此不需要添加零（）。@thedarklord47排序。“日出时间”将是目标ID。例如（var i=0；i
Hmm，我明白你关于古怪格式的观点。因此，你的建议是，正确设置时间格式（例如15:32，而不是下午3:32）在JSON文件中，然后像上面建议的那样循环。之后是否会格式化文本？我更希望时间列显示为“2:20 PM”而不是“14:40”.好的，我使用了Moment.js库，将历元时间列中的日期格式化为字符串，而不是我之前使用的时髦格式。这里是指向的链接。这似乎不会改变列的颜色。：（使用我的第二个建议。在json中，将时间保持为易于比较的格式（即Moment.js）。这样，您可以使用我的第二个代码片段将每列json数据与当前时间进行比较，并相应地为您的列添加颜色。我尝试了这一点，但似乎不起作用。我找到了一个不太优雅的解决方案，我已将其作为答案发布。请随意查看并提出任何建议。感谢您的帮助！这基本上就是我想要的在我的回答中建议。在JSON中使用纪元时间，然后将其与当前时间进行比较。我建议按类进行选择，并在循环中进行比较。单个ID非常脆弱/僵硬。
<div class="column" id="sunrise">
    <p id="sunrise-caption">Sunrise</p>
    <div class="separator"></div>
    <p id="sunrise-time" class="time">undefined</p>
</div>

if (time >= timetables[i].sunrise) {
    document.getElementById("sunrise").style.background = red;
    document.getElementById("sunset").style.background = "none";
}