一般来说,为提高用户体验,在某些管理文章或个人动态时,需要在右下角显示该文章或该动态已经发布了多久。
那么该需求具体到底怎么实现呢?如果没思路可能会觉得有点难,但是一旦有了思路之后,其实实现起来很简单。
1.首先我们要明确显示的时间层具体有几层;
2.要明确年月日时分秒的获取和相互之间的单位换算;
3.怎么用逻辑去判断,去返回详细的时间描述。
理解上面三个步骤之后,我们来实现一下简单的需求,只有四个时间层,分钟层、时钟层、几天层和超过一周后就显示原发布时间层。注:代码中的post_modified是文章或动态的发布时间。
代码如下:
function handlePublishTimeDesc(post_modified){
// 拿到当前时间戳和发布时的时间戳,然后得出时间戳差
var curTime = new Date();
var postTime = new Date(post_modified);
var timeDiff = curTime.getTime() - postTime.getTime();
// 单位换算
var min = 60 * 1000;
var hour = min * 60;
var day = hour * 24;
var week = day * 7;
// 计算发布时间距离当前时间的周、天、时、分
var exceedWeek = Math.floor(timeDiff/week);
var exceedDay = Math.floor(timeDiff/day);
var exceedHour = Math.floor(timeDiff/hour);
var exceedMin = Math.floor(timeDiff/min);
// 最后判断时间差到底是属于哪个区间,然后return
if(exceedWeek > 0){
return post_modified;
}else{
if(exceedDay < 7 && exceedDay > 0){
return exceedDay + '天前';
}else{
if(exceedHour < 24 && exceedHour > 0){
return exceedHour + '小時前';
}else{
return exceedMin + '分鐘前';
}
}
}
},
下面的代码就是调用之后返回的结果,如下代码和图:
var post_modified = "2018-08-15 11:53:04";
console.log(handlePublishTimeDesc(post_modified));
var post_modified = "2018-08-15 09:53:04";
console.log(handlePublishTimeDesc(post_modified));
var post_modified = "2018-08-13 09:53:04";
console.log(handlePublishTimeDesc(post_modified));
var post_modified = "2018-08-05 09:53:04";
console.log(handlePublishTimeDesc(post_modified));
以上代码有瑕疵的地方就是函数内if语句嵌套的比较多,这里建议大家学习下用优雅的方法去处理这些判断问题。