Question

我正在编写一个小日历事件。我希望展示的是一些基本的活动信息（日期，时间，地点，链接以了解更多信息）。由于此页面在任何给定时间内很少会列出超过10-20个事件（每年甚至只有一次或两次），因此我不会使用日历插件或其他任何东西来过度设计它。

我希望做的是将当前日期与HTML5 <time date=""></time>属性进行比较，并在父元素上更改CSS，如果指定的日期是过去的（至少一天）。

默认情况下，类<li>的{{1}}元素的背景颜色为白色（.event）。如果日期是过去的，我希望在页面加载时#fff类的背景颜色更改为灰色（<li class='event'>）。

#ddd

Answer 1

您可以使用Javascript获取当前日期

var today = new Date();
var day = today.getDate();
var month = today.getMonth()+1; //Jan = 0
var year = today.getFullYear();

获取time=""属性，我将类dateColor添加到您将要更改的容器中：

var calDate = document.getElementByClass('dateColor').getAttribute("time");

然后通过JS进行条件检查

之后，如果返回toggleClass()，您可以通过JQuery使用background-color: whateverColor来为具有CSS true的类切换特定元素。

Answer 2

这是一个jQuery解决方案。你可以使用＆＃34; addClass（）＆＃34;或类似的方法以获得更大的灵活性。

https://jsfiddle.net/4nb0w2yu/1/

$('time').each(function() {
  var submitted_date = new Date($(this).attr('date'));
  var now = new Date();
  console.log(submitted_date.getTime() < now.getTime());
  if (submitted_date.getTime() < now.getTime()) {
    $(this).parent().parent().css('background', 'gray')
  }
});

Answer 3

我已经提出了一个应该可以解决问题的jQuery示例。我试着尽可能简洁地写出来...... https://jsfiddle.net/9ekd25L8/3/

$("li.event").each(function(){

var dt = new Date();
var month = dt.getMonth() + 1;
if ($(month).length <= 1) {
    var month = "0" + month;    
}
var day = dt.getDate();
if ($(day).length <= 1) {
    var day = "0" + day;    
}
var time = dt.getFullYear() + "-" + month + "-" + day;
var time2 = $(this).find("time").attr("date");
var monthsplit = time.slice(5,7);
var yearsplit = time.slice(0,4);
var daysplit = time.slice(8,10);
var checkday = time2.slice(8,10);
var checkmonth = time2.slice(5,7);
var checkyear = time2.slice(0,4);
var resultyear = yearsplit - checkyear;
var resultmonth = monthsplit - checkmonth;
var resultday = daysplit - checkday;

if (resultyear == 0 && resultmonth <= 0 && resultday <= 0) {
    $(this).addClass("new");
}
else if (resultyear > 0) {
    $(this).addClass("old");
}
else {
  $(this).addClass("old");
}

 if (resultyear == 0 && resultmonth == 0 && resultday == 0) {
    $(this).addClass("today");
}

$("li").click(function() {
    alert(resultyear + "," + resultmonth + "," + resultday);
});

});

这个jQuery函数只找到所有li.event元素，然后做一些数学运算，让我们知道<time>中的日期是否比今天更早或更新。

jQuery只是抽出当前日期，将其格式化为<time>日期属性，然后减去所有内容。然后，根据结果，添加一个＆＃34; old＆＃34; ＆＃34;新＆＃34;或者＆＃34;今天＆＃34;每个元素的类。

我希望有所帮助！

使用基于日期比较的JQuery（或简单的Javascript）动态更改CSS

3 个答案: