Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
在methods中创建方法showtime，传入要跟当前时间要对比的时间
showtime(time){
letdate=
typeoftime==="number"
?newDate(time)
:newDate((time||"").replace(/-/g,"/"));
letdiff=(newDate().getTime()-date.getTime())/1000;
letdayDiff=Math.floor(diff/86400);
letisValidDate=
Object.prototype.toString.call(date)==="[objectDate]"&&
!isNaN(date.getTime());
if(!isValidDate){
window.console.error("不是有效日期格式");
}
constformatDate=function(date){
lettoday=newDate(date);
letyear=today.getFullYear();
letmonth=("0"+(today.getMonth()+1)).slice(-2);
letday=("0"+today.getDate()).slice(-2);
lethour=today.getHours();
letminute=today.getMinutes();
letsecond=today.getSeconds();
return`${year}-${month}-${day}${hour}:${minute}:${second}`;
};
if(isNaN(dayDiff)||dayDiff<0||dayDiff>=31){
returnformatDate(date);
}
return(
(dayDiff===0&&
((diff<60&&"刚刚")||
(diff<120&&"1分钟前")||
(diff<3600&&Math.floor(diff/60)+"分钟前")||
(diff<7200&&"1小时前")||
(diff<86400&&Math.floor(diff/3600)+"小时前")))||
(dayDiff===1&&"昨天")||
(dayDiff<7&&dayDiff+"天前")||
(dayDiff<31&&Math.ceil(dayDiff/7)+"周前")
);
},
补充知识：Vue中根据时间戳计算时间间隔-年龄
实现目标
由于数据库没有直接存储用户的年龄，只有以时间戳为格式的出生日期，所以不得不在前端做一下计算处理。下面就和大家一起来看一下前端JS的实现方法。
功能代码
由于时间戳是包含了具体时间的，所以在转日期后截取年月日部分即可。
再获取当前的时期计算间隔得出用户的年龄。
//获取用户年龄
this.userAge=this.toAge(timeStamp);
console.log(this.userAge);
//根据返回的日期计算间隔
toAge(timeStamp){
letbirthDate=this.toDate(timeStamp).substr(0,4);
letnewDate=newDate().getFullYear();
return(newDate-parseInt(birthDate));
}
//时间戳转日期
toDate(number){
letn=number;
letdate=newDate(n);
letY=date.getFullYear()+'/';
letM=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'/';
letD=date.getDate()<10?'0'+date.getDate():date.getDate();
return(Y+M+D)
}
内容小结
又是一个小功能的实现，一边记录下自己的代码，一边和大家分享平时代码的点滴，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。