jQuery Prettydate学习笔记

简介

jQuery Prettydate 是一个用于将日期转换为人类可读的格式的 jQuery 插件。它基于 ISO 8601 格式的日期字符串，可以自动转换为相对于当前时间的易于理解的表示方法（如“几秒前”、“一分钟前”、“昨天”、“上周”等）。

安装

要使用 jQuery Prettydate 插件，您需要包含 jQuery 库和 prettydate.js 文件。您可以从以下链接下载这两个文件：

jQuery：https://jquery.com/download/
prettydate.js：https://github.com/johnresig/jquery.prettydate/blob/master/jquery.prettydate.js

或者，您可以使用 CDN 主机来加载它们：

htmlCopy Code
<!-- Include jQuery library -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> 
<!-- Include prettydate.js -->
<script src="https://cdn.jsdelivr.net/prettydate/latest/prettydate.min.js"></script>

使用

使用 jQuery Prettydate 插件非常简单。只需在相应的 HTML 元素上调用 prettyDate() 方法即可。例如，假设您有以下 HTML：

htmlCopy Code
<p class="date">2023-06-01T12:34:56Z</p>

要将其转换为易于理解的格式，请使用以下 JavaScript 代码：

javascriptCopy Code
$(function() {
  $("p.date").prettyDate();
});

这将将日期转换为人类可读的格式。如果页面在其生命周期内保持打开状态，则会定期更新这些日期（每分钟更新一次）。

实例

下面是一个使用 jQuery Prettydate 插件的实例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Prettydate Example</title>
  <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> 
  <script src="https://cdn.jsdelivr.net/prettydate/latest/prettydate.min.js"></script>
</head>
<body>
  <h1>My Blog</h1>
  
  <div class="post">
    <h2>My First Post</h2>
    <p class="date">2023-05-30T09:30:00Z</p>
    <p>This is my first blog post. I hope you like it!</p>
  </div>

  <div class="post">
    <h2>My Second Post</h2>
    <p class="date">2023-05-31T14:45:00Z</p>
    <p>Here's another post for you to enjoy.</p>
  </div>

  <script>
    $(function() {
      $("p.date").prettyDate();
    });
  </script>
</body>
</html>

这将将两个博客文章中的日期转换为人类可读的格式。您可以在以下 JSFiddle 中查看此示例：https://jsfiddle.net/binjie09/jdv84twf/