前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >消息提示时间的格式化例子(小程序)

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

作者头像
copy_left
发布2020-07-27 09:38:04
7110
发布2020-07-27 09:38:04
举报
文章被收录于专栏:方球方球

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

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

使用例子
代码语言:javascript
复制
const time = '2020-07-23 13:13:11'

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

// --> 一分钟前
// 不足一分钟,按照一分钟算
实现
代码语言:javascript
复制
/**
 * 时间间隔
 */
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())
        }
    }
    
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用例子
  • 实现
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档