消息提示时间的格式化例子(小程序)

时间:2022-07-22
本文章向大家介绍消息提示时间的格式化例子(小程序),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

做消息功能是,需要展示小时创建时间与当前时间的间隔, 例如: 一分钟前, 一小时前, 7-22 等

这里写了一个无依赖的格式化工具

使用例子

const time = '2020-07-23 13:13:11'

// 当前时间 '2020-07-23 13:13:20'
noticeTimeFormat(time)

// --> 一分钟前
// 不足一分钟,按照一分钟算

实现

/**
 * 时间间隔
 */
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOURS = 60 * MINUTE
const DAY = 24 * HOURS 

interface I_TimeInterval {
    day: number
    hours: number
    minute: number
}


/**
 * 获取时间间隔
 * @param startTime Date 开始时间 
 * @param endTime Date 结束时间
 * @returns { day, hours, minute }
 */
function timeInterval(startTime:Date, endTime:Date):I_TimeInterval{

 const interval = endTime.getTime() - startTime.getTime()

 const minute = Math.floor(interval % DAY % HOURS / MINUTE)
 const hours =  Math.floor(interval % DAY / HOURS )
 const day =  Math.floor(interval / DAY )
 return { day, hours, minute }
 
}


/**
 * 时间间隔格式化
 * @param  { day, hours, minute }
 */
function formatTime({ day, hours, minute }:I_TimeInterval):string{

    // 不足一分钟 按照一分钟算
    if( !day&&!hours&&!minute ){
      minute = 1
    }
  
    return `${day ? `${day}天` : '' }${hours||day ? `${hours}小时` : '' }${minute ? `${minute}分钟` : '' }`
    
  }
  
  // 小程序内 时间不支持 " / " 分割
  function createIosDate(timeStr:string):Date{
    timeStr = timeStr || ''
    return new Date(timeStr.replace(/-/g, '/').replace(/T/g, ' ') )
  }


/**
 * 时间格式化
 * @param  fmt string 格式 YYYY/mm/d HH:MM:SS 
 * @param  date Date 时间对象
 */
function dateFormat(fmt:string, date:Date) {
    let ret;
    let opt = {
        "Y+": date.getFullYear().toString(),    
        "m+": (date.getMonth() + 1).toString(), 
        "d+": date.getDate().toString(),        
        "H+": date.getHours().toString(),       
        "M+": date.getMinutes().toString(),     
        "S+": date.getSeconds().toString()      
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) :  opt[k].length > 1 ?  opt[k] : `0${opt[k]}` )
        };
    };
  
    return fmt;
  }
  

/**
 * 消息提示时间
 * @param timeStr 
 */
export function noticeTimeFormat(timeStr:string):string|undefined{
    
    const formats = [
        time => dateFormat(`YYYY-mm-dd`, time), // 年
        time => dateFormat(`mm-dd`, time),   // 月
        time => dateFormat(`mm-dd`, time),  // 天
        time => dateFormat(`HH:MM`, time),  // 小时-分钟
        (start, end) => `${formatTime( timeInterval(start, end) )}前`, // 分钟
        time => '一分钟前'  // 秒
      ]

    const [ startList, nowList ] = [ createIosDate(timeStr), new Date() ]
                     .map(item => dateFormat(`YYYY:mm:dd:HH:MM:SS`, item).split(':').map(item => parseInt(item)))
                                         
    for( let i = 0; i < startList.length; i++ ){

        if( nowList[i] > startList[i] ){
            return formats[i]( new Date(createIosDate(timeStr)), new Date())
        }
    }
    
}