JS实用小方法-将时间转换为 `刚刚`、`几秒前`、

JS实用小方法：将时间转换为 `刚刚`、`几秒前`、`几分钟前`、`几小时前`、`几天前`、几月前或按照传入格式显示

随着Web应用的不断发展，用户对于界面中时间展示的友好性和实时性有着越来越高的要求。本文将介绍一个JavaScript实用技巧，通过简洁高效的代码实现将时间戳转换为如“刚刚”、“几秒前”、“几分钟前”等更加人性化的表达方式，同时也支持按照指定格式精确显示。

### 一、需求分析与设计思路

首先，我们需要获取当前时间，并与目标时间进行比较，根据两者的时间差来决定显示的内容。时间差在一定范围内（如1分钟内）显示为“刚刚”，大于1分钟但在1小时内的显示为“几分钟前”，以此类推，直至按月份和日期显示。

### 二、核心JS函数编写

```javascript

function formatTimeago(timestamp, format) {

var now = new Date().getTime();

var targetTime = new Date(timestamp).getTime();

var diff = now - targetTime;

var second = 1000,

minute = second * 60,

hour = minute * 60,

day = hour * 24,

month = day * 30,

year = day * 365;

var unit = ['年', '个月', '天', '小时', '分钟', '秒'];

var timeGap = Math.floor(diff / year);

if (timeGap >= 1) return `${timeGap}年前`;

timeGap = Math.floor(diff / month);

if (timeGap >= 1) return `${timeGap}个月前`;

timeGap = Math.floor(diff / day);

if (timeGap >= 1) return `${timeGap}天前`;

timeGap = Math.floor(diff / hour);

if (timeGap >= 1) return `${timeGap}小时前`;

timeGap = Math.floor(diff / minute);

if (timeGap >= 1) return `${timeGap}分钟前`;

timeGap = Math.floor(diff / second);

if (diff < minute) return '刚刚';

else return `${timeGap}秒前`;

// 如果需要按照特定格式显示，例如"YYYY-MM-DD HH:mm:ss"

if (format) {

var date = new Date(timestamp);

return `${date.getFullYear()}-${addZero(date.getMonth()+1)}-${addZero(date.getDate())} ${addZero(date.getHours())}:${addZero(date.getMinutes())}:${addZero(date.getSeconds())}`;

}

function addZero(num) {

return ('0' + num).slice(-2);

}

```

### 三、使用示例

```html

<!DOCTYPE html>

<head>

<title>时间转换示例</title>

</head>

<body>

// 获取元素并转换时间

var timestampEl = document.getElementById('timestamp');

var timestamp = parseInt(timestampEl.textContent);

var formattedTime = formatTimeago(timestamp);

// 显示转换后的时间

timestampEl.textContent = formattedTime;

</script>

</body>

</html>

```

### 四、自定义格式化输出

如果你还需要按照特定格式（如 "YYYY-MM-DD HH:mm:ss"）显示时间，只需要在调用 `formatTimeago` 函数时传入对应的格式字符串即可：

```javascript

var customFormatTime = formatTimeago(timestamp, 'YYYY-MM-DD HH:mm:ss');

```

这样就完成了一个简单且实用的时间格式转换工具函数，不仅适用于实时更新的动态消息场景，还能满足对历史数据精确时间格式的需求，提升用户体验。希望这个小技巧能帮助你在Web前端开发过程中提高效率，优化交互效果。

计算机编程中，常见的时间格式有以下几种：

1：ISO 8601 格式：国际标准的日期和时间表示方法。
格式为 "YYYY-MM-DDTHH:mm:ss.sssZ"，其中 "T" 是日期和时间的分隔符，"Z" 表示时区。
例如，"2023-09-29T12:34:56Z" 表示 2023 年 9 月 29 日 12 时 34 分 56 秒的时间点。

2：日期字符串格式：常见的日期表示方法，通常是大家可读的形式展示。
格式可以是 "YYYY-MM-DD"（例如 "2023-09-29"）、"MM/DD/YYYY"（例如 "09/29/2023"）或 "DD/MM/YYYY"（例如 "29/09/2023"）等。

3：时间戳：
时间戳是指从某个固定的起点（通常是 Unix 时间的起点，即 1970 年 1 月 1 日 00:00:00 UTC）以来经过的毫秒数、秒数或其他单位数。整数形式表示。

4：24 小时制时间：
以小时、分钟和秒为单位，使用 24 小时制。例如，"12:34:56" 表示 12 时 34 分 56 秒。

5：AM/PM 时间：
使用 12 小时制，并在时间后面加上 "AM" 或 "PM" 表示上午或下午。例如，"12:34:56 PM" 表示下午 12 时 34 分 56 秒。

在处理时间时，根据需要选择适当的格式进行表示和解析。

1：如何将日期字符串转换为时间戳？
在JavaScript中，可以使用Date对象和其相关方法将日期字符串转换为时间戳。下面是一个示例代码：

const dateString = '2021-09-08'; // 替换为您的日期字符串

const date = new Date(dateString);
const timestamp = date.getTime();

console.log(timestamp); // 输出时间戳，例如：1631107200000

使用Date对象将日期字符串转换为日期对象，然后使用getTime()方法获取该日期对象的时间戳。

2：如何将时间戳转日期字符串格式？
在JavaScript中，可以使用Date对象和其相关方法将时间戳转换为日期字符串。下面是一个示例代码：

const timestamp = 1631107200000; // 替换为您的时间戳

const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const dateString = `${year}-${month}-${day}`;

console.log(dateString); // 输出日期字符串，例如：2021-09-08

使用Date对象的getFullYear()、getMonth()和getDate()方法来获取年、月和日，并使用padStart()方法来确保月份和日期为两位数。

3：如何获取时间戳中的年、月、日，小时、分钟和秒？

使用Date对象的相关方法来获取这些信息。下面是一个示例代码：

const timestamp = 1631109035000; // 替换为您的时间戳

const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');

console.log(year, month, day, hours, minutes, seconds);

使用Date对象的getFullYear()、getMonth()、getDate()、getHours()、getMinutes()和getSeconds()方法来获取这些信息，并使用padStart()方法来确保它们为两位数。

络编程之时间格式。

同学们好，今天我们分享的是如何让搜索引擎等程序更容易地提取网页中的时间信息。我们将使用time标签来实现这一目标。这个标签你们可能已经有所了解，但是现在不需要掌握太多细节，只需要知道它的作用即可。

现在来看看我们的示例页面，可以看到页面中包含了很多句不同时间格式的文字。这些文字并没有什么特别之处，只是每一句都包含着时间信息。时间信息的格式比较复杂，但是这不影响我们的演示效果。

接下来，我们将介绍实现代码。time标签用于定义公历日期或时间、二十四小时制，时间和时区偏移是可选的。在所有浏览器中，time标签不会渲染任何特殊的效果。但是，它可以让搜索引擎更容易地在网页中找到对应的时间信息。

使用time标签的另一个原因是，世界上有许多不同的日期格式，但是这些不同的格式不容易被电脑识别。如果我们想自动抓取页面上所有事件的日期并将它们插入到日历中，time元素可以让我们附上清晰的可被机器识别的时间或日期。因此，time标签并不是为了给用户看的，而是为了方便搜索引擎更好地在网页上找到对应的时间。

在我们的示例中，时间和普通文字看上去没有任何区别。除了搜索引擎，网页同手机上的日历、提醒等应用程序交互时，time标签也可以提供很大的方便。

time标签非常简单，只包含一个属性datatime，用于规定日期和时间。如果需要，我们还可以通过元素的内容来指定日期和时间。time标签的值有很多种，只要是符合规范的时间写法格式，都可以被接受并转化为第三方使用的格式。

总之，time标签的使用频率并不高，不需要我们进行太多的学习和理解。如果你们知道有这个东西并且知道它的大概意思，就可以了。

今天的分享就到这里，所有的案例和相关文档都可以向我索取。

下期见，想学习编程的同学请关注我。

在线咨询

上一篇：如何用JavaScript创建弹出窗口
下一篇：JavaScript代码怎样引入到HTML中？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JS实用小方法-将时间转换为 `刚刚`、`几秒前`、

在处理时间时，根据需要选择适当的格式进行表示和解析。

您的项目需求