JS实现Unix时间戳转换为相对时间显示
作者:橙子时间:2026-10-23 09:32:00浏览:84
本文介绍如何在JavaScript中将后台返回的Unix时间戳转换为类似微信朋友圈的相对时间格式,如“xx分钟前”或“xx小时前”。通过自定义函数计算时间差,实现更友好的用户界面展示,适用于需要动态显示发布时间的Web项目。
Unix时间戳相对时间转换实现
后台接口返回的时间数据通常采用Unix时间戳格式,而前端展示需求往往要求将其转换为更易读的相对时间形式,例如“xx分钟之前”、“xx小时之前”或“xx个月之前”,以模拟微信朋友圈的发布时间显示效果。
具体的时间显示效果如下图所示:

实现该功能的核心在于编写一个转换函数,用于计算当前时间与给定Unix时间戳之间的差值,并根据差值大小返回对应的相对时间字符串。
/**
* Unix时间戳转换为当前时间多久之前
* @param timespan int Unix时间戳
* @return timeSpanStr string 转换之后的前台需要的字符串
*/
function Ftime (timespan) {
var dateTime = new Date(timespan * 1000);
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1;
var day = dateTime.getDate();
var hour = dateTime.getHours();
var minute = dateTime.getMinutes();
//当前时间
var now = Date.parse(new Date()); //typescript转换写法
var milliseconds = 0;
var timeSpanStr;
//计算时间差
milliseconds = (now / 1000) - timespan;
//一分钟以内
if (milliseconds <= 60) {
timeSpanStr = '刚刚';
}
//大于一分钟小于一小时
else if (60 < milliseconds && milliseconds <= 60 * 60) {
timeSpanStr = Math.ceil((milliseconds / (60))) + '分钟前';
}
//大于一小时小于等于一天
else if (60 * 60 < milliseconds && milliseconds <= 60 * 60 * 24) {
timeSpanStr = Math.ceil(milliseconds / (60 * 60)) + '小时前';
}
//大于一天小于等于15天
else if (60 * 60 * 24 < milliseconds && milliseconds <= 60 * 60 * 24 * 30) {
timeSpanStr = Math.ceil(milliseconds / (60 * 60 * 24)) + '天前';
}
//大于一个月小于一年
else if (60 * 60 * 24 * 30 < milliseconds && milliseconds <= 60 * 60 * 24 * 30 * 12){
timeSpanStr = Math.ceil(milliseconds / (60 * 60 * 24 * 30)) + '个月前';
}
//超过一年显示
else {
timeSpanStr = year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;
}
return timeSpanStr;
}
总结
上述内容介绍了在JavaScript中将Unix时间戳转换为相对时间显示的方法,希望能对读者有所帮助。如有疑问,欢迎留言交流,作者将及时回复。感谢大家的支持!若觉得本文有用,欢迎转载,请注明出处,谢谢!
作者最新文章
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思?JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数:parseInt与Number的区别及用法
2026-11-03 17:26:54
