需求:

當後臺轉入一個毫秒時間此時我們要進行如下格式轉換:

1分鐘前,顯示"剛剛"

1分鐘~1小時之間,顯示"XX分鐘前"

1小時~1天之間,顯示"xxx小時前"

1天~ 1一個月(31天)之間,顯示"xx天前"

大於1個月,顯示"xx年XX月xx日"

程式碼如下:

var Time={
	//獲取當前時間戳
	getUnix(){
		var date=new Date();
		return date.getTime();
	},
	//獲取今天 0點0分0秒的時間戳
	getTodayUnix(){
		var date=new Date();
		date.setHours(0);
		date.setMinutes(0);
		date.setSeconds(0);
		date.setMilliseconds(0);
		return date.getTime();
	},
	//獲取今年一月一日 0點0分0秒的時間戳
	getYearUnix(){
		var date=new Date();
		date.setMonth(0);
		date.setDate(1);
		date.setHours(0);
		date.setMinutes(0);
		date.setMilliseconds(0);
		return date.getTime();
	},
	//標準時間轉換補丁
	padDate(time){
		return time<10?'0'+time:time;
	},
	// 獲取標準年月日
	getLastDate(time){
		var date=new Date(time);
		var month=this.padDate(date.getMonth()+1);
		var day=this.padDate(date.getDate());
		return date.getFullYear()+'-'+month+'-'+day;
	},
	//轉換時間 傳入毫秒級的時間戳
	getFormatTime(timestamp){
		var now=this.getUnix(); //當前時間戳
		var today=this.getTodayUnix(); //今天0點時間戳
		var timer=(now-timestamp)/1000;// 轉換為秒級時間戳
		var tip="";
		if(timer<=0){
			tip="剛剛";
		}else if(Math.floor(timer/60)<=0){
			tip="剛剛";
		}else if(timer<3600){
			tip=Math.floor(timer/60)+'分鐘前';
		}else if(timer>=3600 && (timestamp-today)>=0){
			tip=Math.floor(timer/3600)+'小時前';
		}else if(timer/86400<=31){
			tip=Math.ceil(timer/86400)+'天前';
		}else{
			tip=this.getLastDate(timestamp);
		}
		return tip;
	}
}
 

測試:

var year=Time.getYearUnix(); //獲取今天1月1日的時間戳
console.log(Time.getLastDate(year)); //顯示年月日
console.log(Time.getFormatTime(year)); //顯示年月日

console.log(Time.getFormatTime(1540019762858)); //放入一個毫秒級時間

let time=new Date().getTime();
console.log(Time.getFormatTime(time)); //'顯示剛剛'

利用該時間轉換物件可以擴充套件設定一個自定義指令(在vue.js中):

Vue.directive('time',{
	bind(el,binding){
		el.innerHTML=Time.getFormatTime(binding.value);
		el.__timeout__=setInterval(function(){
				el.innerHTML=Time.getFormatTime(binding.value);
		},60000);
	},
	unbind(){
		clearInterval(el.__timeout__);
		delete el.__timeout__;
	}
});