自定义指令 v-time
将绝对时间转换为相对时间。(例如,社交软件发布动态里面的时间、几分钟前、几小时前…)
入口页面 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时间转换</title>
</head>
<body>
<div id="app" v-cloak>
<div v-time="timeNow">
</div>
<div v-time="timeBefore">
{{timeBefore}}
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="time.js"></script>
<script src="index.js"></script>
</body>
</html>
根实例 index.js
var app = new Vue({
el: '#app',
data: {
timeNow: (new Date()).getTime(),
timeBefore: 1571324903814
}
});
自定义指令 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 () {
var date = new Date(time);
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);
}, 1000);
},
unbind: function (el) {
clearInterval(el.__timeout__);
delete el.__timeout__;
}
});