Question

我的功能显示当前日期以及接下来的60天，但是我希望突出显示当前日期。最好的方法是什么？

var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();

var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 

document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;


for(var day = 0; day < 60; day++) {
    var date = new Date();
    date.setDate(date.getDate() + day);

    var cell = document.createElement("li");
    var cellText = document.createTextNode(day);

    var date = ('0' + date.getDate()).slice(-2) + ' '
    + monthNames[date.getMonth()] + ' '
    // + date.getFullYear();

    cell.innerHTML = date;
    dateRange.appendChild(cell);
}

Answer 1

由于您始终显示接下来的60天，因此当前日期始终是列表中的第一个日期，因此使用CSS选择器可以轻松定位。例如：

#calendar-table-range li:first-child {
  background-color: yellow;
}

Answer 2

解决该问题的另一种方法是，以与日期范围内的日期相同的格式创建一个时间戳，然后进行搜索。

例如以下内容将格式设置为一个单独的函数，并删除了未使用的代码：

function formatDate(d){
  let monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
  return ('0 ' + d.getDate()).slice(-2) + ' '
                + monthNames[d.getMonth()];
}

function highlightToday() {
  let today = formatDate(new Date());
  let cells = document.querySelectorAll('#calendar-table-range > li');

  for (var i=0, iLen=cells.length; i<iLen; i++) {

    if (cells[i].textContent == today) {
      cells[i].style.color = 'red';
      return;
    }
  }
}

var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();

var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 

document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;


for(var day = 0; day < 6; day++) {
    var date = new Date();
    date.setDate(date.getDate() + day);

    var cell = document.createElement("li");
    var date = formatDate(date);
    cell.innerHTML = date;
    dateRange.appendChild(cell);
}

<div id="month"></div>
<div id="year"></div>
<input type="button" onclick="highlightToday()" value="highlight today">
<ol id="calendar-table-range">
</ol>

突出显示当前日期

2 个答案: