"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"

简介: 【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。

JS怎么处理后台返回的时间变成,小时前,分钟前,刚刚
在互联网的快节奏生活中,时间显示的友好性显得尤为重要。想象一下,当你看到一条消息,下面标注的是“1478465600000”,你可能会一头雾水,但如果是“3小时前”,是不是瞬间就清晰多了?在Web开发中,这样的时间处理功能是常见的需求。本文将带你一起探讨如何用JavaScript将后台返回的时间戳转换成“小时前”,“分钟前”,“刚刚”等友好的时间描述。
首先,我们需要明确一个概念,即时间戳。时间戳是自1970年1月1日00:00:00 UTC以来经过的毫秒数。在JavaScript中,我们可以通过...
接下来,我们来写一个函数,将时间戳转换为“小时前”,“分钟前”,“刚刚”等描述。以下是一个简单的实现示例:
function timeAgo(timestamp) {
const now = Date.now();
const secondsAgo = (now - timestamp) / 1000;
const minutesAgo = secondsAgo / 60;
const hoursAgo = minutesAgo / 60;
const daysAgo = hoursAgo / 24;
if (secondsAgo < 60) {
return '刚刚';
} else if (minutesAgo < 60) {
return Math.floor(minutesAgo) + '分钟前';
} else if (hoursAgo < 24) {
return Math.floor(hoursAgo) + '小时前';
} else if (daysAgo < 30) {
return Math.floor(daysAgo) + '天前';
} else {
// 如果时间更久远,可以进一步处理,比如显示具体日期
return new Date(timestamp).toLocaleDateString();
}
}
// 示例使用
console.log(timeAgo(1609459200000)); // 假设这个时间戳是1小时前的某个时间点
在这个函数中,我们首先计算出当前时间与给定时间戳之间的差值,然后根据这个差值来判断应该返回哪种时间描述。如果时间差小于一分钟,我们返回“刚刚”;如果小于一小时,我们返回“X分钟前”;如果小于一天,我们返回“X小时前”;以此类推。
当然,这个函数可以根据实际需求进行扩展,比如增加“周前”,“月前”等描述,或者对时间格式进行更细致的定制。
在处理时间时,我们还需要考虑到时区问题。JavaScript的Date对象是基于浏览器所在时区的,如果服务器和客户端不在同一个时区,可能需要进行时区转换。这通常涉及到对时间戳的加减操作,或者使用第三方库如moment-timezone来处理。
通过上述方法,我们可以轻松地将后台返回的时间戳转换成用户友好的时间描述。这种细节的处理,虽然看似微不足道,却能极大地提升用户体验,让用户在浏览网页时感受到更多的关怀。作为前端开发者,我们应该时刻关注这些细节,用技术为用户带来更好的使用体验。

相关文章
|
27天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
28天前
|
JavaScript 前端开发
JS如何处理后台时间
JS如何处理后台时间
|
24天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
27天前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
39 5
|
24天前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
|
25天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
63 1
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
34 4
|
28天前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
34 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效