Vue 按照建立時間和當前時間顯示操作(剛剛,幾小時前,幾天前)
阿新 • • 發佈:2020-09-11
在methods中建立方法showtime,傳入要跟當前時間要對比的時間
showtime(time) { let date = typeof time === "number" ? new Date(time) : new Date((time || "").replace(/-/g,"/")); let diff = (new Date().getTime() - date.getTime()) / 1000; let dayDiff = Math.floor(diff / 86400); let isValidDate = Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date.getTime()); if (!isValidDate) { window.console.error("不是有效日期格式"); } const formatDate = function(date) { let today = new Date(date); let year = today.getFullYear(); let month = ("0" + (today.getMonth() + 1)).slice(-2); let day = ("0" + today.getDate()).slice(-2); let hour = today.getHours(); let minute = today.getMinutes(); let second = today.getSeconds(); return `${year}-${month}-${day} ${hour}:${minute}:${second}`; }; if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) { return formatDate(date); } return ( (dayDiff === 0 && ((diff < 60 && "剛剛") || (diff < 120 && "1分鐘前") || (diff < 3600 && Math.floor(diff / 60) + "分鐘前") || (diff < 7200 && "1小時前") || (diff < 86400 && Math.floor(diff / 3600) + "小時前"))) || (dayDiff === 1 && "昨天") || (dayDiff < 7 && dayDiff + "天前") || (dayDiff < 31 && Math.ceil(dayDiff / 7) + "周前") ); },
補充知識:Vue中根據時間戳計算時間間隔-年齡
實現目標
由於資料庫沒有直接儲存使用者的年齡,只有以時間戳為格式的出生日期,所以不得不在前端做一下計算處理。下面就和大家一起來看一下前端JS的實現方法。
功能程式碼
由於時間戳是包含了具體時間的,所以在轉日期後擷取年月日部分即可。
再獲取當前的時期計算間隔得出使用者的年齡。
// 獲取使用者年齡 this.userAge = this.toAge(timeStamp); console.log(this.userAge); // 根據返回的日期計算間隔 toAge(timeStamp) { let birthDate = this.toDate(timeStamp).substr(0,4); let newDate = new Date().getFullYear(); return (newDate - parseInt(birthDate)); } // 時間戳轉日期 toDate(number) { let n = number; let date = new Date(n); let Y = date.getFullYear() + '/'; let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'; let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); return (Y + M + D) }
內容小結
又是一個小功能的實現,一邊記錄下自己的程式碼,一邊和大家分享平時程式碼的點滴,希望能給大家一個參考,也希望大家多多支援我們。