優雅的格式化時間顯示

在像評論列表這樣的前端頁面中,常常會出現時間的字段,若是顯示一個標準的yyyy-MM-dd HH:mm:ss這樣的時間格式,顯然不是很友好,一般產品會要求顯示 [1分鐘前]、[剛剛] 相似的文字,那麼怎麼用js實現呢?我這裏封裝了一個通用的函數以實現,貼出完整代碼:前端

//時間格式化
function getDateDiff(date){

    if(typeof date === 'string'){
        date = new Date(Date.parse(date.replace(/-/g, "/")));
    }else if(typeof date === 'object'){
        date = date.getTime();
    }

    var result = '',
        differentValue = new Date().getTime() - date;

    if(differentValue < 0) {
        return '穿越時空'
    }

    var minute = 1000 * 60,
        hour = minute * 60,
        day = hour * 24,
        week = day * 7,
        month = day * 30,//且都用30天算
        year = month * 12;

    if(differentValue / year >= 1){
        result = parseInt(differentValue / year) + "年前"
    }else if(differentValue / month >= 1){
        result = parseInt(differentValue / month) + "月前"
    }else if(differentValue / week >= 1){
        result = parseInt(differentValue / week) + "周前"
    }else if(differentValue / day >= 1){
        result = parseInt(differentValue / day) + "天前"
    }else if(differentValue / hour >= 1){
        result = parseInt(differentValue / hour) + "小時前"
    }else if(differentValue / minute >= 1){
        result = parseInt(differentValue / minute) + "分鐘前"
    }else{
        result = "剛剛";  
    }

    return result;
}

console.log(getDateDiff('2017-06-21 20:16:24'))
console.log(getDateDiff(parseInt('1497183384000')))
console.log(getDateDiff(1497183384000))
console.log(getDateDiff(new Date('2011-01-11 20:16:24')))
console.log(getDateDiff(new Date('2017-07-14 11:43:24')))
console.log(getDateDiff(new Date('2017-07-14 20:16:24')))

控制檯輸出如圖

相關文章
相關標籤/搜索