Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
在methods中創(chuàng)建方法showtime,傳入要跟當(dāng)前時(shí)間要對(duì)比的時(shí)間
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小時(shí)前') || (diff < 86400 && Math.floor(diff / 3600) + '小時(shí)前'))) || (dayDiff === 1 && '昨天') || (dayDiff < 7 && dayDiff + '天前') || (dayDiff < 31 && Math.ceil(dayDiff / 7) + '周前') ); },
補(bǔ)充知識(shí):Vue中根據(jù)時(shí)間戳計(jì)算時(shí)間間隔-年齡
實(shí)現(xiàn)目標(biāo)
由于數(shù)據(jù)庫(kù)沒(méi)有直接存儲(chǔ)用戶的年齡,只有以時(shí)間戳為格式的出生日期,所以不得不在前端做一下計(jì)算處理。下面就和大家一起來(lái)看一下前端JS的實(shí)現(xiàn)方法。
功能代碼
由于時(shí)間戳是包含了具體時(shí)間的,所以在轉(zhuǎn)日期后截取年月日部分即可。
再獲取當(dāng)前的時(shí)期計(jì)算間隔得出用戶的年齡。
// 獲取用戶年齡 this.userAge = this.toAge(timeStamp); console.log(this.userAge); // 根據(jù)返回的日期計(jì)算間隔 toAge(timeStamp) {let birthDate = this.toDate(timeStamp).substr(0, 4);let newDate = new Date().getFullYear();return (newDate - parseInt(birthDate)); } // 時(shí)間戳轉(zhuǎn)日期 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) }
內(nèi)容小結(jié)
又是一個(gè)小功能的實(shí)現(xiàn),一邊記錄下自己的代碼,一邊和大家分享平時(shí)代碼的點(diǎn)滴,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
