可以使用HTML中的time元素来显示相对时间信息。其中,time元素的datetime属性需要设置为ISO格式的日期和时间,表示发布时间。而time元素的文本内容则可以使用JavaScript来动态获取当前时间,并计算出相对时间信息,最后通过textContent或innerHTML属性进行动态更新。
以下是一个示例代码:
<p>这篇文章发布于 <time datetime="2021-07-01T10:30:00+08:00" id="publish-time">2021年7月1日</time></p>
<script>
// 获取time元素
const timeEl = document.querySelector('#publish-time');
// 获取发布时间
const publishTime = new Date(timeEl.getAttribute('datetime'));
// 获取当前时间
const now = new Date();
// 计算时间差,单位为毫秒
const diff = now.getTime() - publishTime.getTime();
// 计算相对时间信息
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
let relativeTime;
if (days > 0) {
relativeTime = `${days}天前`;
} else if (hours > 0) {
relativeTime = `${hours}小时前`;
} else if (minutes > 0) {
relativeTime = `${minutes}分钟前`;
} else {
relativeTime = `${seconds}秒前`;
}
// 更新time元素的文本内容
timeEl.textContent += `(${relativeTime})`;
</script>
其中,关键词包括:time元素、datetime属性、ISO格式、JavaScript、textContent、innerHTML、querySelector、getAttribute、Date、getTime、Math.floor。