jQuery Prettydate

评论区、消息列表里常看到"刚刚、5 分钟前、昨天"这类相对时间文案。Prettydate 插件的作用就是读入一个时间，与当前时间比较后输出这种人性化文案，比冷冰冰的时间戳友好得多。本节手写一个可复用的 $.fn.prettydate 插件，并讲清其规则与使用注意。

1. 相对时间的规则

把时间差按区间归类：

相差时间	文案	相差时间	文案
小于 60 秒	刚刚	60 秒 ~ 1 小时	x 分钟前
1 ~ 24 小时	x 小时前	1 ~ 30 天	x 天前
超过 30 天	保留原始日期	未来时间	视为"刚刚"

2. 插件源码与完整示例

插件遍历每个元素，读取 data-time（ISO 8601 格式时间），算出与当前时间的差并改写文案：

<ul>
  <li><span class="time">占位一</span></li>
  <li><span class="time">占位二</span></li>
</ul>
<script src="https://example.com/jquery.min.js"></script>

说明：示例中的 https://example.com 地址为占位域名，实际使用请替换为官方 CDN 或本地文件路径。
<script>
$.fn.prettydate = function () {
  this.each(function () {
    var $el = $(this);
    var diff = (Date.now() - new Date($el.data("time")).getTime()) / 1000;
    var text;
    if (diff < 60) text = "刚刚";
    else if (diff < 3600) text = Math.floor(diff / 60) + " 分钟前";
    else if (diff < 86400) text = Math.floor(diff / 3600) + " 小时前";
    else if (diff < 2592000) text = Math.floor(diff / 86400) + " 天前";
    else text = $el.text();          // 时间太久远：保留页面原文案
    $el.text(text);
  });
  return this;                       // 返回 this，支持链式调用
};

// 造两条演示数据：约 90 秒前、约 3 小时前
var now = Date.now();
$(".time").eq(0).data("time", new Date(now - 90 * 1000).toISOString());
$(".time").eq(1).data("time", new Date(now - 3 * 3600 * 1000).toISOString());
$(".time").prettydate();
// 效果：第一条显示"1 分钟前"，第二条显示"3 小时前"（文案随当前时间实时变化）
</script>

3. 使用注意

• 时间格式：能被 new Date() 解析即可，推荐 ISO 8601，如 2024-01-02T18:30:00；带 Z 的 UTC 时间需先转本地时区再比较；
• 页面长期开着不刷新，文案会逐渐过时，可每 60 秒用 setTimeout 重跑一次 prettydate；
• 实战可直接选用 dayjs 的 relativeTime 插件或 jQuery timeago 插件，规则更丰富（含"昨天、下周"），实现思路与本例一致。

4. 与其它库共存

此类插件只依赖 jQuery 遍历与 DOM 操作，不污染全局；若项目还用了 dayjs/moment，可让插件内部调用它们做时区与格式化，避免两套时间逻辑打架。

小结

相对时间 = 用"当前时间 − 目标时间"的差值查表换文案；把规则封装进 $.fn.prettydate 后一行即可批量美化时间，注意使用 ISO 时间格式，并为长驻页面设计定时刷新。