以下是一个简单的示例,使用 JavaScript 实现 Prettydate 功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prettydate Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
function prettyDate(timestamp) {
var currentDate = new Date();
var targetDate = new Date(timestamp);
var secondsAgo = Math.floor((currentDate - targetDate) / 1000);
var interval = Math.floor(secondsAgo / 60);
if (interval > 1) {
return interval + " minutes ago";
}
interval = Math.floor(secondsAgo);
if (interval > 1) {
return interval + " seconds ago";
}
return "just now";
}
$(document).ready(function () {
var timestamp = "2023-01-01T12:34:56"; // 替换为你的实际时间戳
var prettyDateString = prettyDate(timestamp);
$("#prettyDate").text(prettyDateString);
});
</script>
</head>
<body>
<p>Posted <span id="prettyDate"></span></p>
</body>
</html>
在这个例子中,prettyDate 函数接受一个时间戳,计算当前时间与目标时间的差距,并返回一个相对时间的字符串。这只是一个简单的实现,你可能需要根据自己的需求进行调整。
如果你更倾向于使用现有的库,你可以考虑使用 Moment.js,它是一个强大的日期和时间处理库,可以轻松处理相对时间的显示。使用 Moment.js,你可以将上面的例子改写为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prettydate Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
$(document).ready(function () {
var timestamp = "2023-01-01T12:34:56"; // 替换为你的实际时间戳
var prettyDateString = moment(timestamp).fromNow();
$("#prettyDate").text(prettyDateString);
});
</script>
</head>
<body>
<p>Posted <span id="prettyDate"></span></p>
</body>
</html>
在这个例子中,我们使用 Moment.js 的 fromNow 方法来获取相对时间字符串。
转载请注明出处:http://www.zyzy.cn/article/detail/4653/jQuery