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ù)庫沒有直接存儲(chǔ)用戶的年齡,只有以時(shí)間戳為格式的出生日期,所以不得不在前端做一下計(jì)算處理。下面就和大家一起來看一下前端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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
基于vue3+TypeScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Calendar組件
最近在學(xué)習(xí) react,在學(xué)習(xí)到使用 react 開發(fā) Calendar 組件的時(shí)候,突然聯(lián)想到使用 vue 進(jìn)行 Calendar 功能的實(shí)現(xiàn),因?yàn)槟壳笆褂玫募夹g(shù)棧是 vue,剛好可以加深下對(duì) vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Calendar組件2024-05-05
vue3輸入單號(hào)和張數(shù)如何自動(dòng)生成連號(hào)的單號(hào)
最近遇到這樣的需求輸入連號(hào)事件,需要在表格中輸入物流單號(hào),物流號(hào)碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號(hào)物流單號(hào),本文重點(diǎn)介紹vue3輸入單號(hào)和張數(shù),自動(dòng)生成連號(hào)的單號(hào),感興趣的朋友一起看看吧2024-02-02
在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應(yīng)用于各種場(chǎng)合的編碼方式,它可以將信息編碼成一張二維圖案,方便快捷地傳遞信息,在Vue.js中,我們可以使用一些庫和組件來實(shí)現(xiàn)二維碼的生成和掃描,本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法2023-06-06
Vue淺析講解動(dòng)態(tài)組件與緩存組件及異步組件的使用
這篇文章主要介紹了Vue開發(fā)中的動(dòng)態(tài)組件與緩存組件及異步組件的使用教程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù)
本篇文章主要介紹了詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問題
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04

