CSS表明是否「緊張」-div過去，現在或未來？

讓我解釋一下：CSS表明是否「緊張」-div過去，現在或未來？

我開發它運行了一個星期，對多個事件在任何給定時間，音樂節的基於HTML5的移動應用程序，我想包括特徵，顯示事件已經過去了。因此，如果節日在星期一到星期天運行，並且星期二當前中午，那麼星期一的任何活動都將變爲灰色，任何在星期二中午之前完成的活動也將變爲灰色（以及當前正在週二中午將突出顯示）。

該應用程序有多個頁面和多種查看事件的方式，但在任何情況下，事件的詳細信息都將包含在div內;
我正在尋找一個整潔的算法/技術來標記一個div（其中有一個相關的日期時間）爲無論是在過去，現在，還是將來

選項，我認爲：

掛上了「緊張」級上的每一個相關的div，以及一個屬性，表示開始和結束時間（類似start="yyyy-mm-dd-hh-mm"），並在頁面加載我通過與一流緊張所有div使用javascript循環和看看開始 -和end-*課程並添加eithe基於此類的'過去'，'現在'或'未來'類，而在CSS中，我只對這三個類進行樣式設置。

僞jQuery代碼（在頁面加載）：

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

我不喜歡這種方法是什麼需要使用代碼來應用類，這需要一定的處理時間和功率，只是似乎笨重，難吃的和笨重

對事件的開始和結束時間各相關DIV日期時間類：start-yyyy-mm-dd-hh-mm一nd 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解決方案
請包括僞代碼來解釋你的答案...

來源

2015-10-13 kris

第一個選項聽起來很簡單。可以排除過去的類，並確保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函數更新每個顯示器

來源

2015-10-13 01:25:29 charlietfl

我不確定有一個純粹的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）。

來源

2015-10-13 02:41:43

CSS表明是否「緊張」-div過去，現在或未來？

回答

相關問題