jQuery Prettydate

在 web 开发中，经常需要展示时间信息给用户。然而，原始的时间格式可能会让用户感到困惑或者不直观。为了解决这个问题，我们可以使用 jQuery 的 Prettydate 插件来将时间信息转换成易读的格式。

什么是 Prettydate

Prettydate 是一个 jQuery 插件，它可以将时间信息转换成相对时间，比如“刚刚”、“5 分钟前”、“1 小时前”等。这样用户就可以更直观地理解时间信息，而不需要去计算具体的时间差。

如何使用 Prettydate

使用 Prettydate 非常简单。首先，在页面中引入 jQuery 和 Prettydate 插件的文件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="prettydate.js"></script>

接着，我们可以通过以下代码来将时间信息转换成相对时间：

// www.javascriptcn.com code example
<div class="time" data-time="2022-01-01T12:00:00">2022-01-01 12:00:00</div>

<script>
$(document).ready(function() {
  $('.time').each(function() {
    var time = $(this).data('time');
    $(this).text($.prettyDate(time));
  });
});
</script>

在上面的示例中，我们首先在一个 div 元素中添加了一个 data-time 属性，用来存储时间信息。然后通过 jQuery 的 each 方法遍历所有带有 time 类的元素，将时间信息转换成相对时间并更新元素的文本内容。

自定义 Prettydate

如果需要自定义 Prettydate 的显示格式，可以通过传入一个配置对象来实现。比如，我们可以自定义显示“刚刚”、“1 分钟前”、“1 小时前”等：

// www.javascriptcn.com code example
<script>
$(document).ready(function() {
  $.prettyDate.setDefaults({
    now: new Date(),
    minutes: '分钟前',
    hours: '小时前',
    days: '天前',
    months: '个月前',
    years: '年前'
  });

  $('.time').each(function() {
    var time = $(this).data('time');
    $(this).text($.prettyDate(time));
  });
});
</script>

在上面的示例中，我们通过 $.prettyDate.setDefaults() 方法来设置显示格式，然后再次调用 $.prettyDate() 方法来转换时间信息。

结语

通过使用 jQuery Prettydate 插件，我们可以让时间信息更加直观和易读，为用户提供更好的体验。希望本章节的介绍能帮助你更好地理解和使用 Prettydate 插件。