1、时间间隔的处理
前景：最近在做评论展示的部分，相应的评论时间的展示需要处理一下后端传过来的时间戳，展示成常见的间隔显示。常见到这个但是之前没做过，因此借着这次想记录一下，可能还有更好的方法不过我暂时不晓得了。
查阅如何实现这里的时候发现 Momentjs里的diff方法很适合，
计算两个时间的差值-并转换成你需要的单位：
moment(time1).diff(time2, type, boolean)
time1和time2支持类型：Moment|String|Number|Date|Array；
type 支持值为：years, months, weeks, days, hours, minutes, seconds；
boolean 第三个参数默认为false，即为计算结果向下取整（3.2=3; 3.9=3）
例如：计算当前时间距离2018年1月1号的 天数
moment().diff('2018-01-01', 'days'); // 整数
moment().diff('2018-01-01', 'days', true); // 小数
这部分使用解释摘自：(https://www.jianshu.com/p/c34eacb3be20)
✋点击跳转至上述使用解释来源
而且我们项目中之前已经引入这个一个日期格式处理的库 ，直接使用就可
Moment.js - JavaScript 日期处理类库
//具体实现的代码
let comTime = t // 传入评论时间戳 t
let _now = Date.now(); //当前时间
//间隔秒
let secInterv = this.$moment(_now).diff(this.$moment(comTime), 'seconds')
// 间隔分钟
let minInterv = this.$moment(_now).diff(this.$moment(comTime), 'minutes')
// 间隔小时
let hourInterv = this.$moment(_now).diff(this.$moment(comTime), 'hours')
// 间隔天
let dayInterv = this.$moment(_now).diff(this.$moment(comTime), 'days')
// 间隔周 小于4周
let weekInterv = this.$moment(_now).diff(this.$moment(comTime), 'weeks')
// 间隔月份 小于12月 为0 不足一个月
let monthInterv = this.$moment(_now).diff(this.$moment(comTime), 'months')
// 间隔年 为0 不足一年
let yearInterv = this.$moment(_now).diff(this.$moment(comTime), 'years')
if(secInterv > 0 && secInterv < 60 ) {
return `${secInterv}秒前` //几秒前
} else if (minInterv > 0 && minInterv < 60) {
return `${minInterv}分钟前` //几分钟前
} else if (hourInterv > 0 && hourInterv < 24) {
return `${hourInterv}小时前` //几小时前
} else if (dayInterv > 0 && dayInterv < 7) {
return `${dayInterv}天前` //几天前
} else if (weekInterv > 0 && weekInterv <= 4) {
return `${weekInterv}周前` //几周前
} else if (monthInterv > 0 && monthInterv < 12) {
return `${monthInterv}个月前` //几个月前
} else if (yearInterv > 0 && yearInterv < 12) {
return `${yearInterv}年前前` //几年前
}
后来处理了一下小程序的评论时间间隔：
小程序的评论时间间隔，这里产品的需求和之前pc端的略有不同
小程序中评论时间间隔处理（按需求）
* 关于消息时间显示的问题：
* 一分钟内显示——刚刚
* 十分钟内显示——1分钟前，2分钟前，3分钟前。。。。。。十分钟前
* 一天内显示时间——16:36
* 隔天内显示时间——昨天16:36
* 再隔天内显示时间——日期加16:36（2019-11-11 16:36）
一开始的写法：
//评论 && 回复时间的处理
handleCommentTime(t) {
//当前时间
let currTime = $moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
//1分钟内 十分钟内
let minInterTime = $moment(currTime).diff($moment(t), 'minute')
//一天内 隔天内
let dayInterTime = $moment(currTime).diff($moment(t), 'day')
if(minInterTime < 1) {
return '刚刚';
} else if (minInterTime <= 10) {
return `${minInterTime}分钟前`;
} else if (dayInterTime < 1) {
return $moment(t).format('HH:mm');
} else if (dayInterTime < 2) {
return `昨天${$moment(t).format('HH:mm')}`;
} else {
return $moment(t).format('YYYY-MM-DD HH:mm');
}
// console.log('评论时间的获取：',t,currTime)
// console.log('评论时间间隔的分钟：',minInterTime)
},
------------------错误记录分割线------------------错误在审需求实现上不仔细------------------
就在我准备再改一下评论回复里的时间间隔，细看感觉有点不太对。。。过于着急，其实现在的需求用diff里的day处理是不太合适的。
因为diff的一天包括了前一天的某个时间点之前，都算在一天内。
现在产品的需求不同于之前的一天前。现在的只算当天，因此作了以下的修改，
感觉越改实现的方法越笨拙了哈...
希望后期会发现更好的方法✌️目前的实现如下
handleCommentTime(t) {
console.log('评论的时间ttt:',$moment(t).format('YYYY-MM-DD HH:mm:ss'))
//当前时间,当前日
let currTime = $moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
let currDay = $moment(new Date()).format('DD')
//1分钟内 十分钟内
let minInterTime = $moment(currTime).diff($moment(t), 'minute')
//一天内
let comDayInterTime = $moment(t).format('DD')
// 隔天
let yesterDayInterTime = currDay - 1
if(minInterTime < 1) {
return `刚刚`;
} else if (minInterTime <= 10) {
return `${minInterTime}分钟前`;
} else if (currDay === comDayInterTime) {
return $moment(t).format('HH:mm');
} else if (yesterDayInterTime == comDayInterTime) {
return `昨天${$moment(t).format('HH:mm')}`;
} else {
return $moment(t).format('YYYY-MM-DD HH:mm');
}
},
//调用上述函数，去处理评论时间间隔
item.createTime = _this.handleCommentTime(item.createTime)
if (item.commentReplyVOList && item.commentReplyVOList.length) {
item.commentReplyVOList.forEach(secondItem => {
//处理评论回复时间间隔
//secondItem.createTime = $moment(secondItem.createTime).format('YYYY-MM-DD HH:mm:ss');
secondItem.createTime = _this.handleCommentTime(secondItem.createTime)
})
}
2、时间的格式化处理
：之前在项目中用moment.js最多的地方就是格式化时间：
this.$moment(this.monthDays).format("YYYY-MM-DD"); //格式：年 月 日
this.$moment(this.monthDays).format("YYYY-MM-DD HH:mm：ss") //格式:年月日时分秒
"YYYY-MM-DD" 分别对应：年月日
这个方式可以处理后端传来的时间戳等等
3、获取到一周前、一个月之前、一年前等的时间
前景：之前遇到这种的一般都是在做筛选的时候处理的，获取现在一周前的数据，现在到一个月之前的数据，现在到一年前的数据图等等需求。
//这个是一开始用的方法,直接略啰嗦
let month = 30 * 24 * 60 * 60 * 1000;
let seven = 7 * 24 * 60 * 60 * 1000;
// 一个月之前
getbeforeMonth() {
let _now = Date.now();
let month = 30 * 24 * 60 * 60 * 1000;
this.monthDays = _now - month;
this.monthDays = this.$moment(this.monthDays).format("YYYY-MM-DD");
},
// 7天前
getbeforeWeek() {
console.log('=============77777')
let _now = Date.now();
let seven = 7 * 24 * 60 * 60 * 1000;
this.sevenDays = _now - seven
this.sevenDays = this.$moment(this.sevenDays).format("YYYY-MM-DD");
console.log('seeeeee-----------',this.sevenDays)
}
后来发现momentjs里有方法，可以获取到之前的时候以及之后的时间，研究了一下
一、时间加：moment().add()方法
nums：时间差值，Number类型
type可选枚举值：year,month,week,days,hour,minute,second`
------- 7天 -------
7天后：moment(Date.now()).add(7,'days')
7天前：moment(Date.now()).add(-7,'days')
let afterSeven = this.$moment(Date.now()).add(7,'days')
// this.$moment(new Date()).add(7,'days')
console.log('-------------',afterSeven)
`得到一个时间对象如下：`
Moment {_isAMomentObject: true, _i: Thu Jan 09 2020 09:59:02 GMT+0800 (中国标准时间), _isUTC: false, _pf: {…}, _locale: Locale, …}
_isAMomentObject: true
_i: Thu Jan 09 2020 09:59:02 GMT+0800 (中国标准时间) {} //当前时间
_isUTC: false
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/, ordinal: ƒ, …}
_d: Thu Jan 16 2020 09:59:02 GMT+0800 (中国标准时间) {} //需要的7天后的值，可以格式化一下取到需要的
_isValid: true
__proto__: Object
同理获取当前时间为时间戳也可以取到七天后的时间
let afterSeven =this.$moment(new Date()).add(7,'days')
// this.$moment(new Date()).add(7,'days')
`时间对象`：
Moment {_isAMomentObject: true, _i: 1578535334769, _isUTC: false, _pf: {…}, _locale: Locale, …}
_isAMomentObject: true
_i: 1578535334769 //当前时间 区别在当前时间的取值不同，时间对象内的当前展示也不同，这里是时间戳的格式
_isUTC: false
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/, ordinal: ƒ, …}
_d: Thu Jan 16 2020 10:02:14 GMT+0800 (中国标准时间) {} //需要的7天后的值，可以格式化一下取到需要的
_isValid: true
__proto__: Object
最终需要的标准格式时间:
时间对象：Moment {_isAMomentObject: true, _i: 1578563368883, _isUTC: false, _pf: {…}, _locale: Locale, …}
格式化处理：let weekget = this.$moment(afterSeven).format('YYYY-MM-DD')
//2020-01-02
一周： add中设置为week即可
moment(Date.now()).add(1,'week') //一周后
let afterSeven = this.$moment(Date.now()).add(1,'week')
let weekget = this.$moment(afterSeven).format('YYYY-MM-DD')
月份： month
moment(new Date()).add(-1,'month') //一个月前
let afterSeven = this.$moment(new Date()).add(-1,'month')
let monthGet = this.$moment(afterSeven).format('YYYY-MM-DD') //2019-12-09
//翻到最最之前很心酸的获取一个月之前的方法 写过就还是记录一下了
const data = new Date()
const currentDate = this.$moment(data).format("YYYY-MM-DD")
console.log('获取当前的日期=============',currentDate)
this.getNowData()
//日期的默认展示--获取当前日期 ，一个月之前
getNowData() {
let now = new Date();
let year = now.getFullYear(); //得到年份
var nowMonth = now.getMonth(); //得到月份
var nowDate = now.getDate(); //得到日期
nowMonth = nowMonth + 1;
nowMonth = nowMonth.toString().padStart(2, "0"); //月份头部补全（补充为两位数‘0’
nowDate = nowDate.toString().padStart(2, "0"); //日期补全
let defaultStartDate =`${year}-${nowMonth - 1}-${nowDate}`;
let defaultEndtDate = `${year}-${nowMonth}-${nowDate}`;
this.beginTime = defaultStartDate
this.endTime = defaultEndtDate
this.dataSelect = [defaultStartDate,defaultEndtDate]
this.getBillpage()
},
year,month,week,days,hour,minute,second，这些同理可得
二、时间减：moment(time).subtract(num, type)
nums：时间差值，Number类型
type可选枚举值：year,month,week,days,hour,minute,second`
年 ：
let before = this.$moment(new Date()).add(-1,'year')
let yearBefor = this.$moment(before).format('YYYY-MM-DD') //2019-01-09
`before 得到的时间对象：`
Moment {_isAMomentObject: true, _i: Thu Jan 09 2020 18:29:37 GMT+0800 (中国标准时间), _isUTC: false, _pf: {…}, _locale: Locale, …}
_isAMomentObject: true
_i: Thu Jan 09 2020 18:29:37 GMT+0800 (中国标准时间) {}
_isUTC: false
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/, ordinal: ƒ, …}
_d: Wed Jan 09 2019 18:29:37 GMT+0800 (中国标准时间) {}
_isValid: true
__proto__: Object
还有moment.duration,moment.utc等方法
等等等，好多之前未用到的，之后也可以用下再来记录