js實現文章或個人動態釋出了多久的時間描述:幾分鐘前,幾小時前,幾天前等
阿新 • • 發佈:2019-02-15
一般來說,為提高使用者體驗,在某些管理文章或個人動態時,需要在右下角顯示該文章或該動態已經發布了多久。
那麼該需求具體到底怎麼實現呢?如果沒思路可能會覺得有點難,但是一旦有了思路之後,其實實現起來很簡單。
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語句巢狀的比較多,這裡建議大家學習下用優雅的方法去處理這些判斷問題。