jQuery Prettydate

jQuery Prettydate

jQuery Prettydate是一个jQuery插件，用于将日期和时间转换成易于阅读的相对时间（如“刚刚”、“2小时前”、“3天前”等）格式。本文档将向您介绍如何在您的网站上使用Prettydate。

引入jQuery Prettydate

引入jQuery Prettydate非常简单，只需在您的HTML文件中导入jQuery和prettydate.js文件即可。

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

使用jQuery Prettydate

要使用jQuery Prettydate，您只需要将日期和时间字符串传递给插件的prettyDate方法即可。prettyDate方法将返回转换后的易于阅读的时间。

var dateString = "2022-03-24T00:57:34.000Z";
var prettyDateString = $.prettyDate(dateString);
console.log(prettyDateString); // 输出：29分钟前

您还可以将一个可选的日期格式字符串作为prettyDate方法的第二个参数来传递。格式字符串应该是由替换字符串和日期格式化字符组成的模式。默认格式是“{month}/{day}/{year} {hour}:{minute}{ampm}”，其中“{month}”、“{day}”、“{year}”、“{hour}”、“{minute}”和“{ampm}”代表日期格式化字符。

var dateString = "2022-03-24T00:57:34.000Z";
var prettyDateString = $.prettyDate(dateString, "{month}/{day}/{year} {hour}:{minute}{ampm}");
console.log(prettyDateString); // 输出：03/23/2022 05:57PM

自动更新时间

您可以使用prettyDate方法来将您网站上的静态日期自动更新为相对时间。要实现这一点，您需要做的就是将类名为“prettyDate”的标签包含日期并添加“title”属性。

<p class="prettyDate" title="2022-03-24T00:57:34.000Z">2022-03-24T00:57:34.000Z</p>

在页面加载后，prettyDate方法将会自动将“title”属性中的日期转换为易于阅读的时间，并将其设置为元素的文本。此外，prettyDate方法还会使用JavaScript中的setInterval方法定期更新元素的文本，以反映当前的相对时间。

setInterval(function() {
  $('.prettyDate').each(function() {
    var dateString = $(this).attr('title');
    var prettyDateString = $.prettyDate(dateString);
    $(this).text(prettyDateString);
  });
}, 60000);

这个例子会将页面中所有带有“prettyDate”类的元素的文本自动更新为相对时间，并且每隔一分钟就会更新一次。

总结

在本文档中，我们介绍了如何引入和使用jQuery Prettydate插件，以及如何自动更新日期到易于阅读的相对时间。我们希望这些信息对您在开发网站时转换日期和时间格式提供了有用的帮助。