最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了。比如咱们今天要聊的这个话题:如何用Vue开发一个实时性的时间转换指令?
接下来正文从这开始~
,如上图所示(我是截取的某技术社区首页的部分页面),大家看到用红色边框勾选中的时间文字了吧。很多网站发布动态的时候,都会有一个相对本机时间转换后的相对时间。那你知道这个功能实现的背后原理是什么吗?如果有兴趣的,请备好瓜子,茶水,继续往下读。
一般在服务器的存储时间格式是Unix时间戳,比如2018-01-17 06:00:00的时间戳是1516140000。前端在拿到数据后,将它转换为可持续的时间格式再显示出来。为了显示出实时性,在一些社交类产品中,甚至会实时转换为几秒前,几分钟前,几小时前等不同的格式,因为这样比直接转换为年,月,日,时,分,秒,显得对用户更加友好,体验更人性化。
今天,我们就来实现这样一个Vue自定义指令v-time,将表达式传入的时间戳实时转换为相对时间。为了便于演示效果,我们初始化时定义了两个时间。
首先来看html结构:
& lt; div id=坝τ谩眝-cloak>
& lt; div v-time=" timeNow "祝辞& lt;/div>
& lt; div v-time=" timeBefore "祝辞& lt;/div>
& lt;/div>
以及初始化一个Vue实例:
应用var=new Vue ({
埃尔:“#应用”,
数据:{
timeNow:(新日期()).getTime (),
timeBefore: 686219755822
}
})
timeNow是目前的时间,timeBefore是一个写死的时间:1991-09-30。
先来分析一下时间转换的逻辑:
<李> 1分钟以前,显示“刚刚”。
<李> 1分钟~ 1小时之间,显示“xx分钟前”。
<李> 1小时~ 1天之间,显示“xx小时前”。
<李> 1天~ 1个月(31天)之间,显示“xx天前”。
<李>大于1个月,显示“xx年xx月xx日”。
这样罗列出来,逻辑就一目了然了。为了使判断更简单,我们这里统一使用时间戳进行大小判断。在写指令v-time之前,需要先写一系列与时间相关的函数,我们声明一个对象,把它们都封装到里面。
var时间={//获取当前时间戳
getUnix:函数(){
var=new日期();
返回date.getTime ();
},//获取今天0点0分0秒的时间戳
getTodayUnix:函数(){
var=new日期();
date.setHours (0);
date.setMinutes (0);
date.setSeconds (0);
date.setMilliseconds (0);
返回date.getTime ();
},//获取今年1月1日0点0分0秒的时间戳
getYearUnix:函数(){
var=new日期();
date.setMonth (0);
date.setDate (1);
date.setHours (0);
date.setMinutes (0);
date.setSeconds (0);
date.setMilliseconds (0);
返回date.getTime ();
},//获取标准年月日
getLastDate:函数(){
var=new日期(时间);
var月=date.getMonth () + 1 & lt;10 & # 63;' 0 ' + (date.getMonth () + 1): date.getMonth () + 1;
var天=date.getDate () & lt;10 & # 63;' 0 ' + date.getDate (): date.getDate ();
返回date.getFullYear() +“-”+月+“-”+天;
},//转换时间
getFormatTime:函数(时间戳){
现在var=this.getUnix ();//当前时间戳
今天var=this.getTodayUnix ();//今天0点的时间戳
var年=this.getYearUnix ();//今年0点的时间戳
var计时器=(现在-时间戳)/1000;//转换为秒级时间戳
var="尖;
如果(计时器& lt;=0) {
提示='刚刚';
}else if (Math.floor(定时器/60)& lt;=0) {
提示='刚刚';
}else if(计时器& lt;3600){
提示=Math.floor(定时器/60)+“分钟前”;
}else if(计时器祝辞=3600,,(时间戳-今天在=0)){
提示=Math.floor(定时器/3600)+“小时前”;
}else if(定时器/86400 & lt;=31) {
提示=Math.ceil(定时器/86400)+“天前”;
其他}{
提示=this.getLastDate(时间戳);
}
返回提示;
}
}
当然,如果你对JavaScript的日期类型不太了解,可以先去runoob.com上面了解下。
