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

一、代码注释详解

参数相关

  • date为传入时间 例:"2023/5/10 11:32:01" 2023-02-01 09:32:01
  • type为返回类型 例:YYYY-MM-DD YYYY年MM月DD日 X月前 参数字母统一为大写
  • 默认规则,大于一天(24小时)展示'X天前;如果大于等于30天,展示"X个月前"
  • zeroFillFlag参数为是否数字补零,默认补零
  • 传入时间为必写参数,type和zeroFillFlag参数可选填

时间处理公式依据

  • 10秒: 10 * 1000
  • 1分钟: 60 * 1000
  • 1小时: 60 * 60 * 1000
  • 24小时(一天):60 * 60 * 24 * 1000
typescript 复制代码
const formatPast = (date, type = "X个月前", zeroFillFlag = true) => {
  // 定义countTime变量,用于存储计算后的数据
  let countTime;
  // 获取当前时间戳
  let time = new Date().getTime();
  // 转换传入参数为时间戳
  let afferentTime = new Date(date).getTime();
  // 当前时间戳 - 传入时间戳
  time = Number.parseInt(`${time - afferentTime}`);
  if (time < 10000) {
    // 10秒内
    return "刚刚";
  } else if (time < 60000 && time >= 10000) {
    // 超过10秒少于1分钟内
    countTime = Math.floor(time / 1000);
    return `${countTime}秒前`;
  } else if (time < 3600000 && time >= 60000) {
    // 超过1分钟少于1小时
    countTime = Math.floor(time / 60000);
    return `${countTime}分钟前`;
  } else if (time < 86400000 && time >= 3600000) {
    // 超过1小时少于24小时
    countTime = Math.floor(time / 3600000);
    return `${countTime}小时前`;
  } else if (time >= 86400000 && (type == "X天前" || type == "X个月前")) {
    countTime = Math.floor(time / 86400000);
    // 如果大于等于30天 且传入格式为"X个月前"
    if (countTime >= 30 && type == "X个月前") {
      return `${Math.floor(countTime / 30)}个月前`;
    }
    // 否则展示'X天前'
    return `${countTime}天前`;
  } else {
    // 一天(24小时)以上 按传入格式参数显示不同格式
    // 数字补零
    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 == "YYYY-MM-DD") {
      return zeroFillFlag ? `${Y}-${zeroFillM}-${zeroFillD}` : `${Y}-${M}-${D}`;
    } else if (type == "YYYY/MM/DD") {
      return zeroFillFlag ? `${Y}/${zeroFillM}/${zeroFillD}` : `${Y}/${M}/${D}`;
    }
    if (type == "YYYY年MM月DD日") {
      return zeroFillFlag
        ? `${Y}年${zeroFillM}月${zeroFillD}日`
        : `${Y}年${M}月${D}日`;
    }
    if (type == "YYYY.MM.DD") {
      return zeroFillFlag ? `${Y}.${zeroFillM}.${zeroFillD}` : `${Y}.${M}.${D}`;
    }
    if (type == "MM月DD日") {
      return zeroFillFlag ? `${zeroFillM}月${zeroFillD}日` : `${M}月${D}日`;
    }
  }
};
console.log(formatPast("2023-11-11 11:11:11")); // 1个月前
console.log(formatPast("2023-02-01 09:32:01", "YYYY-MM-DD", false)); // 2023-2-1
console.log(formatPast("2023.12.8 19:32:01", "YYYY/MM/DD")); // 2023/12/08
console.log(formatPast("2023/5/10 11:32:01", "YYYY年MM月DD日")); // 2023年05月10日
console.log(formatPast("2023/6/25 11:32:01", "YYYY.MM.DD", false)); // 2023.6.25
console.log(formatPast("2023/8/08 11:32:01", "MM月DD日")); // 08月08日
console.log(formatPast("2023-07-10 21:32:01", "X天前")); // 171天前
相关推荐
青柠之夏cc38 分钟前
前端拖拽功能原生实现,不引入拖拽库完成业务
开发语言·前端·python
liangshanbo12151 小时前
前端大文件切片上传怎么做?
前端
codigger1 小时前
从 "调模型" 到 "搭系统":Harness Engineering 凭什么成为 2026 年 AI 圈最热的新词
程序员·编程·#人工智能·#agent
Sand(ContextGate)2 小时前
Python Agent 测试实战:测试与评估,让 Agent 像传统软件一样可交付
前端·javascript·python·microsoft·ai
广州华水科技2 小时前
单北斗GNSS变形监测系统在城市安全与地质灾害中的应用前景
前端
颜进强2 小时前
20 · NestJs循环依赖与 forwardRef:容器为什么在环面前会死,"占位再补齐"怎么救
前端·后端·ai编程
颜进强2 小时前
19 · NestJs @Global 落地账:装饰器与 `isGlobal` 参数,各在什么场景上岗
前端·后端·ai编程
码艺-Alimjan2 小时前
Tauri 网站To桌面应用实战总结
前端·javascript·vue
颜进强2 小时前
18 · NestJS动态模块与 forRoot:`imports: [ConfigModule.forRoot({...})]` 到底在 import 什么
前端·后端·ai编程
lugiax3 小时前
跨平台移植:把一个Mac终端搬上 Windows 学到的七件事
程序员·ai编程