如何使用javscript(jquery)在html中显示当前日期

Question

我正在prepend处理一个html文档，所以当用户发布评论时，它会实时显示。现在的问题是日期的外观，我希望日期以类似3s ago而不是09/08/2022 2:41 p.m.的格式显示，实现这种的最佳方式是什么

let _html = '
<div class="details_Comment">
<h4><b>{{c.user.username|title}}</b> <span>{% now "SHORT_DATETIME_FORMAT" %} ago</span></h4> 
<p>' + _comment + '</p>
</div>
' $(".comment-wrapper").prepend(_html)

Answer 1

这是一个有效的概念验证，不使用任何外部库。如果它超过60，它基本上只是将秒转换为分钟，如果超过60，则将分钟转换为小时，如果超过24，则将小时转换为天，等等…

/* Given two timestamp, return the difference in text format, e.g. '10 minutes' */
const getTimeDifference = (startTime, endTime) => {
const msDifference = new Date(endTime).getTime() - new Date(startTime).getTime();
const diff = Math.abs(Math.round(msDifference / 1000));
const divide = (time, round) => Math.round(time / round);
if (diff < 60) return `${divide(diff, 1)} seconds`;
if (diff < 3600) return `${divide(diff, 60)} minutes`;
if (diff < 86400) return `${divide(diff, 3600)} hours`;
if (diff < 604800) return `${divide(diff, 86400)} days`;
if (diff < 31557600) return `${divide(diff, 604800)} weeks`;
if (diff >= 31557600) return `${divide(diff, 31557600)} years`;
return 'unknown';
};
/* Given a timestamp, return how long ago it was, e.g. '10 minutes' */
const getTimeAgo = (dateTime) => {
const now = new Date().getTime();
const isHistorical = new Date(dateTime).getTime() < now;
const diffStr = getTimeDifference(dateTime, now);
if (diffStr === 'unknown') return diffStr;
return isHistorical ? `${diffStr} ago` : `in ${diffStr}`;
};
/* Update the UI at intervals */
const startTime = new Date();
const timer = setInterval(() => {
document.getElementById('comment').innerHTML = getTimeAgo(startTime);
}, 1000);

<p id="comment"></p>

Answer 2

const dateFormater = function(date: Date) {
// if the date is not a date object, return error
if (Object.prototype.toString.call(date) !== "[object Date]") {
return "Invalid Date";
}
let normalizedDate = new Date(date);
let now = new Date();
let format = (num, type) => {
if (type === 'Hour' && num === 1) return 'An hour ago';
else if (num > 1) return `${num} ${type}s ago`;
else return `${num} ${type} ago`;
}
// if the seconds difference is less than 60, return "Just now"
if (Math.floor((now.getTime() - normalizedDate.getTime()) / 1000) < 60) {
// no need to call the format `function` here
return 'Just now';
}
// if the seconds difference is less than 3600, return "X minutes ago"
else if (Math.floor((now.getTime() - normalizedDate.getTime()) / 1000) < 3600) {
return format(Math.floor((now.getTime() - normalizedDate.getTime()) / 1000 / 60), 'Minute');
}
// if the seconds difference is less than 86400, return "X hours ago"
else if (Math.floor((now.getTime() - normalizedDate.getTime()) / 1000) < 86400) {
return format(Math.floor((now.getTime() - normalizedDate.getTime()) / 1000 / 60 / 60), 'Hour');
}
// if the seconds difference is less than 604800, return "X days ago"
else if (Math.floor((now.getTime() - normalizedDate.getTime()) / 1000) < 604800) {
return format(Math.floor((now.getTime() - normalizedDate.getTime()) / 1000 / 60 / 60 / 24), 'Day');
}
// else return the normalizedDate in the format "DD/MM/YYYY"
else {
return normalizedDate.toLocaleDateString();
}
};
//usage
let dateToFormat = new Date()
let formatterInterval = setInterval(()=> {
console.log(dateFormater(dateToFormat))
},6000) // or however seconds you like

您现在可以将Interval设置为1000ms，以便几乎真实地更新其中的日期。

如果你有很大的数据/评论，你可能还想为那些已经通过解析阈值的评论创建一个寄存器，例如那些超过一周的评论，这样它们就不必通过这个函数agian(如果你像我一样是一个极简主义者(