Question

让我解释一下：

我正在开发一个基于HTML5的音乐节移动应用程序，该应用程序运行一周，并且在任何给定时间都有多个活动，我想要包含一个显示已经过的事件的功能灰色的因此，如果节日在周一至周日进行，并且当前是星期二中午，那么周一的任何事件都将变为灰色，任何在周二中午之前完成的事件也将变为灰色（以及当前正在进行的事件）周二中午将突出显示。）

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

我考虑的选项：

把一个＆＃34;拉紧＆＃34;每个相关div上的类以及指示开始和结束时间的属性（类似start="yyyy-mm-dd-hh-mm"），当加载页面时，我使用javascript循环遍历所有具有类紧张的div并查看开始 - 和结束 - *并添加过去＆＃39;，现在＆＃39;或者＆＃39; future＆＃39;基于它的类，在CSS中我只是在这3个类上设置了样式。

伪jQuery代码（在页面加载时）：

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

我不喜欢这种方法需要使用代码来应用这些类，这需要一些处理时间和功能，而且看起来很笨重而又笨重

在事件的开始和结束时间的每个相关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解决方案最感兴趣< /强>
请包含伪代码以解释您的答案...

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);

我并不真正看到对未来课程的需求，因为这将是您的默认样式

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

的显示

Answer 2

我不确定是否有纯CSS解决方案，因为您需要以某种方式动态更新当前的解决方案。如果你能以某种方式这样做，你可以使用~选择器，并执行以下操作：

.current {
  font-weight: bold;
}

/* Future Events */
.current ~ li {
  color: red;
}

使用：

<ol class="events">
  <li class="event"></li>
  <li class="event"></li>
  <li class="event current"></li>
  <li class="event"></li>
  <li class="event"></li>
  <li class="event"></li>
  <li class="event"></li>
</ol>

尽管如此，使用Javascript管理真的不是很多。

您可以执行以下操作：

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

  $events.each(function () {
    var $event = $(this);

    var start = $event.data('start');
    var end = $event.data('end');

    $event
      .toggleClass('event--past', start < now && end < now)
      .toggleClass('event--present', start > now && end < now)
      .toggleClass('event--future', start > now && end > now)

  });

  setTimeout(updateEventClasses, 60000);
}());

当data-start和data-end属性为Date对象的时候（或者你可以像data-start="timeinms"那样对now做同样的事情）。

CSS表示＆＃34;拉紧＆＃34; -div是过去，现在还是未来？

2 个答案: