自定义指令v-time，实现时间转换器

最新推荐文章于 2023-03-23 19:51:14 发布

uniquemei

最新推荐文章于 2023-03-23 19:51:14 发布

阅读量412

点赞数

分类专栏： Vue.js 2学习笔记

本文链接：https://blog.csdn.net/uniquemei/article/details/89315022

版权

Vue.js 2学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

话不多说，直接上代码。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时间转换器</title>
		<script src="libs/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/time_index.js"></script>
	</body>
</html>

time_index.js

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

time.js

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();
	},
	//获取今年1月1日0点0分0秒的时间戳
	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();
		var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
		var day = date.getDate() < 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.getFormatTime(binding.value);
		el._timeout_ = setInterval(function() {
			el.innerHTML = Time.getFormatTime(binding.value);
		}, 60000);
	},
	unbind: function(el) {
		clearInterval(el._timeout_);
		delete el._timeout_;
	}
});

uniquemei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义指令v-time，实现时间转换器

话不多说，直接上代码。index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>时间转换器</title> <script src="libs/vue.min.js"></script> <...
复制链接

扫一扫