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前端开发过程中提高效率，优化交互效果。

玖叶教程网

前端编程开发入门

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