您可以使用.getHours（）函数

Question

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

为了将其置于上下文中，列A的时间为8AM，列B的时间为12PM，列C的时间为3PM，列D的时间为6PM，列E的时间为9PM。因此，如果当前时间是下午2点，则应突出显示B列，直到时间为下午3点，其中C列将突出显示。

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

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

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

的Javascript

data _null_;
length var $1000.;

do i=1 to 10;

   var=catt(var, " Total"||put(i, 2. -l), " Male"||put(i, 2. -l), " Female"||put(i, 2. -l));
 end;

 call symputx('input_list', var);
 run;

%put &input_list;

HTML

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

Answer 1

您可以使用.getHours（）函数

只需创建一个新的变量日期，然后在其上使用if (teams.indexOf(row.TeamID) < 0) { teams.push(row.TeamID); teams[row.TeamID] = row.Team; }即可获得小时值。

.getHour()

告诉我你是否有问题以及你有什么问题。如果你需要操作DOM我真的建议你使用JQuery它更容易，它只是一个HTTP请求而不是使用普通的JavaScript。

Answer 2

基本上你需要有一种方法来检查时间＆＃34;目前在每一栏中都有。

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对象，那将会更好。

那样的话，不是做一个时髦的innerHTML来把你的数据拿出去，然后解码它，然后做比较，你会做这样的事情：

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

好多了。

Answer 3

经过多次修补，我已经设法制定出自己的解决方案。

对于每一列，我分配了一个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文件中指定的纪元时间。

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

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

也许不是最干净的解决方案，但它似乎运作良好。建议欢迎。

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

3 个答案:

您可以使用.getHours（）函数