我对js不熟悉,能给我任何提示吗?所以基本上我有动态生成的日历。我需要用“红色”标记当前日期。您可以使用我的Codepen获取更多详细信息。
当我尝试从该表中执行值时,得到的数组看起来像这样〜> enter image description here。
https://codepen.io/david_jons/pen/aPXeaK
<div id="calendar-container">
<div id="calendar-header">
<span id="calendar-month-year"></span>
</div>
<div id="calendar-dates">
</div>
</div>
JS:
window.onload = function(){
var d = new Date();
var month_name = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month = d.getMonth();
var year = d.getFullYear();
var first_date = month_name[month] + " " + 1 + " " + year;
var tmp = new Date(first_date).toDateString();
var first_day = tmp.substring(0, 3);
var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var day_no = day_name.indexOf(first_day);
var days = new Date(year, month+1, 0).getDate();
var calendar = get_calendar(day_no, days);
document.getElementById("calendar-month-year").innerHTML = month_name[month]+" "+year;
document.getElementById("calendar-dates").appendChild(calendar);
var tr = document.getElementById("calendar-dates");
var tds = tr.getElementsByTagName("td");
var current_date = d.getDate();
}
function get_calendar(day_no, days){
var table = document.createElement('table');
var tr = document.createElement('tr');
//row for the day letters
for(var c=0; c<=6; c++){
var li = document.createElement('li');
li.innerHTML = "SMTWTFS"[c];
tr.appendChild(li);
}
table.appendChild(tr);
//create 2nd row
tr = document.createElement('tr');
var c;
for(c=0; c<=6; c++){
if(c == day_no){
break;
}
var td = document.createElement('td');
td.innerHTML = "";
tr.appendChild(td);
}
var count = 1;
for(; c<=6; c++){
var td = document.createElement('td');
td.innerHTML = count;
count++;
tr.appendChild(td);
}
table.appendChild(tr);
//rest of the date rows
for(var r=3; r<=7; r++){
tr = document.createElement('tr');
for(var c=0; c<=6; c++){
if(count > days){
table.appendChild(tr);
return table;
}
var td = document.createElement('td');
td.innerHTML = count;
count++;
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
答案 0 :(得分:0)
基本上,您需要检查当前粘贴的日期是否与今天(new Date()
)相同。
function isToday(day, month, year){
const today = new Date();
return today.getDate() === day && today.getMonth() === month && today.getFullYear()===year;
}
https://codepen.io/kwiniarski97/pen/magPKV?editors=1111
这可以通过其他方式完成
答案 1 :(得分:0)
您可以使用Array.prototype.filter
遍历HTML集合,并以HTML集合作为上下文。
以下代码段可能会有帮助:
var cells = document.getElementById("calendar-dates").getElementsByTagName("td");
var current_date = d.getDate();
var matchingElement = Array.prototype.filter.call(cells, function(cell) {
return +current_date === +cell.textContent;
})[0];
matchingElement.style.backgroundColor = 'red';