首页/文章/javascript

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

2024-04-12
1341 分钟
...

参数相关

  • date为传入时间 例:"2023/5/10 11:32:01" 2023-02-01 09:32:01
  • type为返回类型 例:- / 年月日 年
  • 默认规则,大于等于一天(24小时)展示'X天前;大于等于30天且小于365天展示'X个月前';大于等于365天且展示'x年前',否则按照传入参数规则展示
  • zeroFillFlag参数为是否数字补零,默认补零
  • 时间参数date为必写参数

时间处理公式依据

  • 10秒: 10 * 1000
  • 1分钟: 60 * 1000
  • 1小时: 60 * 60 * 1000
  • 24小时(一天):60 * 60 * 24 * 1000
    const formatPast = (date, type = "default", zeroFillFlag = true) => {
        
        let countTime;
        
        let time = new Date().getTime();
        
        let afferentTime = new Date(date).getTime();
        
        time = Number.parseInt(`${time - afferentTime}`);
        let typeList = ['default', '-', '/', '.', '年月日', '月日', '年']
        if (time < 0 || (typeof time === 'number' && isNaN(time)) || !date) {
            
            return alert("请查看时间参数是否满足规则:\n1、时间参数为必填参数且为过去时间 \n2、时间参数不合法(参考date参数规则)");
        } else if ((zeroFillFlag && typeof zeroFillFlag !== 'boolean') || (type && !typeList.includes(type))) {
            
            return alert("请查看补零参数/格式参数是否满足规则:\n1、补零参数为布尔值类型 \n2、格式参数不合法(参考type参数规则)");
        } else if (time < 10000) {
            
            return "刚刚";
        } else if (time < 60000) {
            
            countTime = Math.floor(time / 1000);
            return `${countTime}秒前`;
        } else if (time < 3600000) {
            
            countTime = Math.floor(time / 60000);
            return `${countTime}分钟前`;
        } else if (time < 86400000) {
            
            countTime = Math.floor(time / 3600000);
            return `${countTime}小时前`;
        } else if (time >= 86400000 && type == "default") {
            
            countTime = Math.floor(time / 86400000);
            
            if (countTime >= 365) {
                return `${Math.floor(countTime / 365)}年前`;
            }
            
            if (countTime >= 30) {
                return `${Math.floor(countTime / 30)}个月前`;
            }
            return `${countTime}天前`;
        } else {
            
            
            let Y = new Date(date).getFullYear();
            let M = new Date(date).getMonth() + 1;
            let zeroFillM = M > 9 ? M : "0" + M;
            let D = new Date(date).getDate();
            let zeroFillD = D > 9 ? D : "0" + D;
            
            if (type == "-" || type == "/" || type == ".") {
                return zeroFillFlag
                    ? Y + type + zeroFillM + type + zeroFillD
                    : Y + type + M + type + D;
            }
            
            if (type == "年月日") {
                return zeroFillFlag
                    ? Y + type[0] + zeroFillM + type[1] + zeroFillD + type[2]
                    : Y + type[0] + M + type[1] + D + type[2];
            }
            
            if (type == "月日") {
                return zeroFillFlag
                    ? zeroFillM + type[0] + zeroFillD + type[1]
                    : M + type[0] + D + type[1]
            }
            
            if (type == "年") {
                return Y + type
            }

        }
    };
    
    
    
    
    console.log(formatPast("2024-1-1 11:11:11")); 
    console.log(formatPast("2023-11-1 11:11:11")); 
    console.log(formatPast("2015-07-10 21:32:01")); 
    console.log(formatPast("2023-02-01 09:32:01", "-", false)); 
    console.log(formatPast("2023.12.8 19:32:01", "/")); 
    console.log(formatPast("2023.12.8 19:32:01", ".")); 
    console.log(formatPast("2023/5/10 11:32:01", "年月日")); 
    console.log(formatPast("2023/6/25 11:32:01", "月日", false)); 
    console.log(formatPast("2023/8/08 11:32:01", "年")); 

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
javascript2026-02-24
navigator.sendBeacon全指南
在前端开发中,埋点系统是必不可少的一环。我们经常需要在用户 关闭页面 、 刷新 或 跳转路由 时,向服务器发送最后一条统计数据(比如用户停留时长、页面跳出率)。 但这看似简单的需求,在实现时却危机四伏:请求发不出去?页面跳转卡顿?今天我们就来聊聊这个问题的终极解决方案 —— 。 一、 痛点与传统方案的挣扎 场景还原 当用户点击关闭按钮时,浏览器会触发生命周期事件( 或 )。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求,浏览...
学习
javascript2025-11-02
理解浏览器事件系统,从用户点击到事件对象的完整旅程
深入理解浏览器事件系统:从用户点击到事件对象的完整旅程 “当我点击页面按钮时,背后发生了什么?为什么回调函数能收到一个包含丰富信息的event对象?今天,让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象 作为前端开发者,我们每天都在写这样的代码: 这段代码如此熟悉,以至于我们很少停下来思考:​ ​这个 对象到底从哪里来?它为什么能知道点击的精确坐标?为什么能识别是哪个元素被点击了?​ ​ 更神奇的是,当我们手动创建事件时:...
学习
javascript2025-10-01
实现大文件上传全流程详解
在日常开发中,大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件,直接上传不仅容易超时,还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案,支持分片上传、断点续传、秒传和手动中。 一、先看效果:我们要实现什么? 先上核心功能清单,确保大家明确目标,知道我们要解决哪些实际问题: 大文件分片上传 :将文件切成固定大小的小片段分批上传,避免单次请求超时 秒传 :服务器已存在完整文件时,直接返...
学习
javascript2025-09-18
JavaScript 的多线程能力:Worker
如果你写过一些计算量稍大的 JavaScript 代码,比如图像处理、大量数据排序或者复杂的算法,你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应,动画也停了,就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript,又要负责渲染页面、响应用户操作,一旦它被繁重的计算任务占满,就无暇顾及其他,用户体验便直线下降。 这个问题的根源,正是“主线程是单线程的”。那么,如何解决呢? 答案很简单:把这...
学习面试
javascript2025-09-15
一张 8K 海报差点把首屏拖垮
你给后台管理系统加了一个「企业风采」模块,运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s,LCP 红得发紫。 老板一句「能不能像朋友圈那样滑到哪看到哪?」——于是你把懒加载重新翻出来折腾了一轮。 解决方案:三条技术路线,你全踩了一遍 1\. 最偷懒:原生 一行代码就能跑,浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖,IE 全军覆没。 必须写死 ,否则 CLS 会抖成 PPT。 适用场景...
学习
javascript2025-09-10
🚀 Web Worker让你的应用丝滑
🌟 引言 在日常的前端开发中,你是否遇到过这样的困扰: 大数据处理时页面卡死 :处理几万条数据时,页面直接卡成PPT,用户点击毫无反应 复杂计算阻塞UI :图片处理、数据分析等计算密集型任务让整个应用假死 文件上传/下载卡顿 :大文件操作时,其他功能完全无法使用 实时数据处理性能差 :WebSocket接收大量数据时,页面渲染严重滞后 今天分享6个Web Worker的核心技巧,让你的应用告别卡顿,用户体验丝滑如德芙! 💡 核心技巧...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录