Make a date display of WeChat messages

Goal : Observe the time display of WeChat sending and receiving messages, and complete a date conversion function

---

One: Analyze the problem

First observe the time display of WeChat messages and extract useful information.

1.  If the message is sent and received on the same day, the date is displayed in hours + minutes. On the mobile phone, it is divided into early morning, morning, afternoon, and evening.
2. If the message was sent and received yesterday, the displayed time is yesterday + hour + minute.
3. If it is within a week or two days ago, the displayed time is the day of the week + hour + minute.
4. If it is one week later, the year, month, day + hour + minute can be displayed. It can also be subdivided into the current year to only display the month day + hour + minute, I have no subdivision here.

Two: problem-solving ideas

1. Get the time to send and receive messages.
2. Format the time for sending and receiving messages.
3. After a period of time, subtract the time of sending and receiving messages from the current time.
4. Judge the difference and display different date formats according to the difference.

Three: Write code

//一天内的时间，显示为凌晨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))

Four: Test results

Tested many times, the effect is good.

 Five: Optimize the code

1. Modify the naming convention.
2. Extract the same function code.