做一个微信消息的日期展示

Posted 2022-04-13 五花肉三七分

目标：观察微信收发消息的时间展示，完成一个日期转化函数

---

一：分析问题

首先观察微信消息的时间展示后提取有用信息。

1.  如果是当天收发的信息，日期显示的是小时+分钟。手机端的话又分为了凌晨，上午，下午，晚上。
2. 如果是昨天收发的信息，显示的时间为昨天+小时+分钟。
3. 如果是一周以内，两天之前，显示的时间为星期几+小时+分钟。
4. 如果是一周以后，可以显示年月日+小时+分钟。还可以细分为当前年份时只显示月日+小时+分钟，我这里没有细分。

二：解题思路

1. 得到收发消息的时间。
2. 格式化收发消息的时间。
3. 过一段时间后用当前时间减去之前收发消息的时间。
4. 判断差值，根据差值显示不同的日期格式。

三：编写代码

//一天内的时间，显示为凌晨xx：xx；上午xx：xx；晚上xx：xx
//超过一天小于两天的，显示为昨天：凌晨xx：xx；上午xx：xx；晚上xx：xx
//超过两天小于一周的，显示为星期几：凌晨xx：xx...
//超过一周的，显示几月几日：凌晨xx：xx；。。。。
const ONE_DAY =  24*60*60*1000;
const LOCAL_TIME = new Date();
const LOCAL_DATE = LOCAL_TIME.getDate();
const LOCAL_ZERO_TODAY = (LOCAL_TIME.getHours()*60*60 + LOCAL_TIME.getMinutes()*60 + LOCAL_TIME.getSeconds())*1000;//距离今天零点
const ONE_WEEK_ARRAY = ['','星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
function getFormatCommentTimeInfo(time)
    let createTime = new Date(time);
    let commentTimeInfo = 
        year : createTime.getFullYear(),
        month: createTime.getMonth()+1,
        day: createTime.getDay(),
        hour: createTime.getHours(),
        minute: createTime.getMinutes()<10 ? '0' +createTime.getMinutes() : createTime.getMinutes(),
        date: createTime.getDate()
    
    return commentTimeInfo

function formatCommentTime(time)
    let diffTime = LOCAL_TIME - time;//与现在时间的差异
    const year,month,day,hour,minute,date = getFormatCommentTimeInfo(time);
    if(diffTime <= ONE_DAY+ LOCAL_ZERO_TODAY)
        if(date === LOCAL_DATE )
            if(hour < 6)
                return `凌晨$hour:$minute`
            else if( hour >= 6 && hour < 12)
                return `上午$hour:$minute`
            else if(hour >= 12 && 18 >hour)
                return `下午$hour:$minute`
            else
                return `晚上$hour:$minute`
               
        else 
            if(hour < 6)
                return `昨天 凌晨$hour:$minute`
            else if( hour > 6 && hour < 12)
                return `昨天 上午$hour:$minute`
            else if(hour > 12 && 18 >hour)
                return `昨天 下午$hour:$minute`
            else
                return `昨天 晚上$hour:$minute`
            
        
    else if (diffTime <= (ONE_DAY * 7 + LOCAL_ZERO_TODAY)) 
        return `$ONE_WEEK_ARRAY[day] $hour:$minute`;
     else 
        return `$year年$month月$date日 $hour:$minute`;
    

console.log(formatCommentTime(1549530579463))

四：测试结果

多次测试，效果良好。

 五：优化代码

1. 修改命名规范。
2. 抽离相同功能代码。