javascript - CSS 指示 "tensed"-div 是过去、现在还是 future ？

Question

让我解释一下:

我正在为一个音乐节开发一个基于 HTML5 的移动应用程序，该应用程序运行一周并且在任何给定时间都有多个事件，我想包含一个功能，该功能将已通过的事件显示为灰色。因此，如果音乐节从周一到周日举行，而现在是周二中午，那么周一的所有事件都将显示为灰色，周二中午之前结束的所有事件也将显示为灰色(以及当前在星期二中午将突出显示)。

该应用程序有多个页面和多种查看事件的方式，但在每种情况下，事件的详细信息都将包含在一个 div 中；
我正在寻找一种简洁的算法/技术来将 div(具有关联的日期时间)标记为过去、现在或 future

我考虑过的选项:

1. 在每个相关的 div 上放置一个“tensed”类以及一个指示开始和结束时间的属性(类似start="yyyy-mm-dd-hh-mm" ), 加载页面时，我使用 javascript 循环遍历所有 div，并查看开始- 和结束-* 类并添加“过去”、“现在”或“ future ”基于此的类，在 CSS 中，我只对这 3 个类进行了样式设置。

伪 jQuery 代码(在页面加载时):

$('.tensed').each(function() { 
     $(this).removeClasses('past', 'present', 'future')
            .addClass(myGetTenseClassForThisTimeFunc($(this).attr('start')); 
}

我不喜欢这种方法的地方是需要使用代码来应用类，这会占用一些处理时间和能力，而且看起来笨重、笨拙

1. 在事件的开始和结束时间的每个相关 div 上都有一个日期时间类:start-yyyy-mm-dd-hh-mm 和 end-yyyy-mm-dd-hh-mm(例如 start-2015-10-13-10-43).然后，以编程方式，我猜想的每一分钟，我都会为范围内所有可能的类调整样式。

伪jQuery代码:

setTimeout( function() {
    dt = getDateTimeAsTimestampFunc();
    dt_start = getFestivalStartTime();
    dt_end = getFestivalEndTime();
    dt_loop = dt_start;
    while(dt_loop<dt_end) {
      if (dt_loop<dt) $(dt_loop).css(*make it greyedout*);
      if (dt_loop==dt) $(dt_loop).css(*make it highlighted*);
      incrementDateTimeByOneMinute(dt_loop);
    }
}, 1000);

类似的东西 - 但开始和结束日期更智能一些。这不如第一个选项优雅。

我觉得一定有更优雅的方法来解决这个问题，但我没有想出比上述更好的方法——我对纯 CSS 解决方案最感兴趣< br/>请包含伪代码来解释您的答案...

Answer 1

第一个选项听起来很简单。可以排除过去的，并确保 past 类在它们最初呈现时就在它们上面。

使用 data-start 和 data-end 作为你的属性:

var minutesUpdate = 10;

function updateTimeClasses() {
    var now = new Date();

    $('.tensed').not('.past').each(function () {
        var $el = $(this),
            start = new Date($el.data('start')),
            end = new Date($el.data('end')),
            isOver = end > now,
            isCurrent = start <= now && now <= end;

        if (isOver || isCurrent) {
             $el.toggleClass('present', isCurrent).toggleClass('past', isOver);
        }  
    });

}

setInterval(updateTimeClasses, minutesUpdate * 60 *1000);

我真的不认为需要 future 的类(class)，因为那将是您的默认样式

另一个建议是使用 timeUntil 函数来更新每个显示