VueJS（十三）

mwwb

于 2020-08-07 16:32:56 发布

阅读量115

点赞数

分类专栏： VueJS 文章标签： vue

本文链接：https://blog.csdn.net/qq_43278421/article/details/107529941

版权

VueJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天继续时间显示组件的实战
目标是把时间转换成相对时间

确定转换逻辑
1分钟以前，显示“刚刚“”
1分钟~1个小时内，显示“xx分钟前”
1个小时~1天之间，显示“xx小时前”
1天~1个月之间，显示“”xx天“”
大于一个月，显示“xx年xx月xx日”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app" v-cloak >
			<div v-time="timeNow"></div>
			<div v-time="timeBefore"></div>
		</div>
		<script src="js/time.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>

var Time = {
	//获取当前时间戳
	getUnix:function(){
		var date = new Date();
			return date.getTime();
		},
		
		//获取今天0点0分0秒的时间戳
	    getTodayUnix:function(){
			var date = new Date();
			date.setHours(0);
			date.setMinutes(0);
			date.setSeconds(0);
			date.setMilliseconds(0);
			return date.getTime();
		},
		getYearUnix:function(){
			var date = new Date();
			date.setMonth(0);
			date.setDate(1);
			date.setHours(0);
			date.setMinutes(0);
			date.setSeconds(0);
			date.setMilliseconds(0);
			return date.getTime();
		},
		getLastDate:function(time){
			var date = new Date(time);
			var month = date.getMonth() +1 <10 ? '0' +(date.getMonth()+1):date.getMonth()+1;
			var day = dateDaDate() <10 ? '0' + date.getDate() : date.getDate() ;
			return date.getFullYear() + '-' + month + '-' + day;
		},
		
		//转换时间
		getFormatTime:function(timestamp){
			var now = this.getUnix();      //当前时间戳
			var today = this.getTodayUnix();  //今天0点时间戳
			var year = this.getYearUnix();    //今年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;
			
		
	}
};
Vue.directive('time',{
	bind:function(el,binding){
		el.innerHTML = Time.getFormation(binding.value);
		el.__timeout__=setInterval(function(){
			el.innerHTML = Time.getFormatTime(binding.value);
		},60000);
	},
	unbind:function(el){
		clearInterval(el.__timeout__);
		delete el.__timeout__;
	}
});


var app = new Vue({
	el:'#app',
	data:{
		timeNow:(new Date()).getTime(),
		timeBefore:1488930695721
	}
});