HTML日程表怎么动态高亮显示当天的任务事项-html教程-PHP中文网

用 new Date().toISOString().split('T')[0] 获取标准 yyyy-MM-dd 格式日期，与任务 data-date 值严格比对，并在每次 DOM 更新（如插入、过滤、翻页）后调用高亮函数，配合 aria-current="date" 和语义化 CSS 确保可访问性。

html日程表怎么动态高亮显示当天的任务事项

如何用 JavaScript 获取并匹配“今天”的日期

HTML 日程表本身不带时间语义，必须靠 JS 解析当前日期（new Date()），再和每条任务的日期字段比对。关键不是格式化显示，而是精确匹配：比如任务日期是 "2026-10-26"，而 new Date().toISOString().split('T')[0] 才能拿到同格式字符串；若用 toLocaleDateString() 可能返回 "2026/10/26" 或带星期，导致 === 失败。

常见错误现象：高亮了昨天或明天的任务，或者完全没反应——大概率是日期字符串格式不一致，或没考虑时区（new Date() 默认本地时区，但后端返回的 ISO 时间可能带 Z）。

建议统一用 yyyy-MM-dd 格式比对，避免 locale 差异
若任务日期来自 API，优先让它返回 ISO 字符串（如 "2026-10-26T09:00:00Z"），再用 dateStr.split('T')[0] 提取
不要用 getDate() / getMonth() + 1 拼接，容易漏补零（如 10 月变成 "2026-10-6" 而非 "2026-10-06"）

给当天任务项添加高亮类名的时机与方式

不能等 DOM 渲染完再遍历所有任务元素去查日期——尤其当任务是异步加载（如 fetch 后 innerHTML 插入）时，得确保操作发生在数据落地之后。最稳妥的做法是在插入任务 HTML 后立即处理，而不是全局监听或定时扫描。

示例逻辑（假设每个任务

有 data-date="2026-10-26" 属性）：

function highlightTodayTasks() {
  const today = new Date().toISOString().split('T')[0];
  document.querySelectorAll('[data-date]').forEach(el => {
    el.classList.toggle('is-today', el.dataset.date === today);
  });
}
// 在插入任务 HTML 后调用
container.innerHTML = taskHtml;
highlightTodayTasks();