HTML怎么做通知时间分组_html通知按今天昨天分组【大全】-html教程-PHP中文网

必须用时间戳计算天数差再分组：math.floor((date.now() - notifytime) / 86400000) 得整数天差，按 0/1/≥2 分为 today/yesterday/older；统一后端返回 iso 或毫秒时间戳，渲染时先分组再遍历 keys 避免标题重复。

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 遍历每个通知，遇到第一个「今天」就插个 <h4>今天</h4>，结果后面每条通知都判断一次，标题刷屏。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

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);
});
<p>// 渲染时只遍历 keys，每个 key 插一次标题
Object.entries(groups).forEach(([key, list]) => {
if (list.length === 0) return;
html += <code><h4>${key === 'today' ? '今天' : key === 'yesterday' ? '昨天' : '更早'}</h4></code>;
list.forEach(n => html += <code><div class="notification">${n.content}</div></code>);
});</p>