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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。