1. 程式人生 > >js實現文章或個人動態釋出了多久的時間描述:幾分鐘前,幾小時前,幾天前等

js實現文章或個人動態釋出了多久的時間描述:幾分鐘前,幾小時前,幾天前等

一般來說,為提高使用者體驗,在某些管理文章或個人動態時,需要在右下角顯示該文章或該動態已經發布了多久。

那麼該需求具體到底怎麼實現呢?如果沒思路可能會覺得有點難,但是一旦有了思路之後,其實實現起來很簡單。

1.首先我們要明確顯示的時間層具體有幾層;

2.要明確年月日時分秒的獲取和相互之間的單位換算;

3.怎麼用邏輯去判斷,去返回詳細的時間描述。

理解上面三個步驟之後,我們來實現一下簡單的需求,只有四個時間層,分鐘層、時鐘層、幾天層和超過一週後就顯示原發布時間層。注:程式碼中的post_modified是文章或動態的釋出時間。

程式碼如下:

            function handlePublishTimeDesc(post_modified){
                // 拿到當前時間戳和釋出時的時間戳,然後得出時間戳差
                var curTime = new Date();
                var postTime = new Date(post_modified);
                var timeDiff = curTime.getTime() - postTime.getTime();
            
                // 單位換算
                var min = 60 * 1000;
                var hour = min * 60;
                var day = hour * 24;
                var week = day * 7;

                // 計算髮布時間距離當前時間的周、天、時、分
                var exceedWeek = Math.floor(timeDiff/week);
                var exceedDay = Math.floor(timeDiff/day);
                var exceedHour = Math.floor(timeDiff/hour);
                var exceedMin = Math.floor(timeDiff/min);

                // 最後判斷時間差到底是屬於哪個區間,然後return
                if(exceedWeek > 0){
                    return post_modified;                    
                }else{
                    if(exceedDay < 7 && exceedDay > 0){
                        return exceedDay + '天前';
                    }else{
                        if(exceedHour < 24 && exceedHour > 0){
                            return exceedHour + '小時前';
                        }else{
                            return exceedMin + '分鐘前';
                        }
                    }
                }
            },

下面的程式碼就是呼叫之後返回的結果,如下程式碼和圖:

var post_modified = "2018-08-15 11:53:04";
console.log(handlePublishTimeDesc(post_modified));
var post_modified = "2018-08-15 09:53:04";
console.log(handlePublishTimeDesc(post_modified));
var post_modified = "2018-08-13 09:53:04";
console.log(handlePublishTimeDesc(post_modified));
var post_modified = "2018-08-05 09:53:04";
console.log(handlePublishTimeDesc(post_modified));

以上程式碼有瑕疵的地方就是函式內if語句巢狀的比較多,這裡建議大家學習下用優雅的方法去處理這些判斷問題。