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

Setting background colour of a column depending on time using JS

本文关键字：背景 颜色 设置 时间 JS 使用      更新时间：2023-09-26

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

具体来说，列A的时间为上午8点，列B的时间为下午12点，列C的时间为3点，列D的时间为6点，列E的时间为9点。因此，如果当前时间是下午2点，则B列应该高亮显示，直到时间是下午3点，此时C列变为高亮显示。

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

我的理解是，我必须使用getElementsByClassName并对集合进行迭代，因为每个结果都会产生一个集合。然而，这将针对所有列，而不仅仅是一个特定的列。

这就是我迄今为止在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';
            }
        }

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（）函数

只需创建一个新的变量日期，然后使用.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";
};

如果你有问题，告诉我你有什么问题。如果您需要操作DOM，我真的建议您使用JQuery，它要简单得多，而且它只是一个HTTP请求，而不是使用普通的JavaScript。

基本上，您需要有一种方法来"检查当前每列中的时间"。

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';
    }
}

这不会按原样工作，因为你的时间显示为一个时髦的字符串。如果您可以访问用于填充列的JSON对象，那么效果会好得多。

这样，你就可以做这样的事情：

var cols = document.getElementsByClassName('column');
for(var i=0; i<cols.length; i++){
    if (jsonColumnData[i] < currTime){
        cols[i].style.background = '#ba4346';
    }
}

好多了。

经过多次修改，我终于找到了自己的解决方案。

对于每一列，我都分配了一个div 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>

我将JSON文件中每个数组中的所有非标准时间格式转换为Epoch时间。接下来，我为每个列ID编写if语句，检查时间是否大于或等于JSON文件中指定的epoch时间。

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

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

也许不是最干净的解决方案，但似乎效果很好。欢迎提出建议。

相关文章：