当前位置：首页 > 文章列表 > 文章 > 前端 > HTML通知时间分组怎么弄？今天昨天分组大全

HTML通知时间分组怎么弄？今天昨天分组大全

2026-05-26 18:30:53 0浏览收藏

本文深入解析了HTML通知按“今天/昨天/更早”进行时间分组的核心实现逻辑，强调必须摒弃依赖字符串日期比较（如toDateString或toLocaleDateString）的脆弱方案，转而统一使用毫秒级时间戳进行精确计算——通过Math.floor((Date.now() - notifyTime) / 86400000)获取整数天差，再严格按0/1/≥2映射到语义化分组键，并配合结构化数据预处理与键序渲染避免标题重复；同时直击时区、夏令时、后端时间格式不一致（ISO vs 秒级戳 vs 无时区字符串）等高频坑点，给出可落地的健壮实践：强制约定后端返回ISO 8601或毫秒戳、缓存当前时间戳、全程保持数值运算、明确产品侧时间基准定义——看似简单的分组，实则是时间精度、跨端一致性与工程鲁棒性的综合考验。

HTML怎么做通知时间分组_html通知按今天昨天分组【大全】

怎么用 JavaScript 对通知时间做「今天 / 昨天 / 更早」分组

直接结论：不能只靠 innerHTML 拼接，得先解析时间戳、计算相对天数、再按逻辑分桶。浏览器原生不提供「语义化日期分组」API，必须自己算。

常见错误是拿 new Date().toDateString() 和通知时间的 toDateString() 硬比——看似能区分今天昨天，但跨时区、夏令时、服务器时间与本地时间不一致时全崩。

务必统一用时间戳（毫秒）做减法，再除以 24 * 60 * 60 * 1000 得整数天差
用 Math.floor((now - notifyTime) / (24 * 60 * 60 * 1000)) 算「过去多少整天」，比 getDate() 稳定得多
分组键建议用字符串字面量："today"、"yesterday"、"older"，别用中文键名，避免模板渲染出错

后端返回的时间字段格式影响分组逻辑

如果后端给的是 ISO 字符串（如 "2024-05-20T09:30:00Z"），直接传给 new Date() 没问题；但如果给的是 Unix 秒级时间戳（如 1716207000），必须乘 1000 再构造 Date 对象，否则时间会错 1000 倍。

更隐蔽的坑是后端返回带时区偏移但没标注（如 "2024-05-20 09:30:00"），这种字符串在 Safari 上可能被当成本地时间解析，在 Chrome 可能被当成 UTC——结果同一条通知，在不同浏览器里分到不同组。

强制要求后端返回 ISO 8601 格式（含 Z 或 +08:00），或明确约定用毫秒时间戳
前端拿到时间字段后，立刻转成时间戳存为 notifyTimestamp，后续所有计算只用这个数字
避免在分组逻辑里反复调用 new Date()，把当前时间戳缓存为常量 const now = Date.now()

渲染时怎么让「今天 / 昨天」标题只出现一次

分组本身只是把通知数组变成对象：{ today: [...], yesterday: [...], older: [...] }，但 DOM 渲染时容易重复插入标题——比如用 forEach 遍历每个通知，遇到第一个「今天」就插个

`今天`

，结果后面每条通知都判断一次，标题刷屏。

正确做法是先生成结构化数据，再按分组键顺序遍历渲染：

const groups = { today: [], yesterday: [], older: [] };
notifications.forEach(n => {
  const diffDays = Math.floor((now - n.timestamp) / 86400000);
  if (diffDays === 0) groups.today.push(n);
  else if (diffDays === 1) groups.yesterday.push(n);
  else groups.older.push(n);
});
// 渲染时只遍历 keys，每个 key 插一次标题
Object.entries(groups).forEach(([key, list]) => {
if (list.length === 0) return;
html += 
${key === 'today' ? '今天' : key === 'yesterday' ? '昨天' : '更早'};
list.forEach(n => html += ${n.content});
});