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等方法
等等等，好多之前未用到的，之后也可以用下再来记录