時(shí)間的處理

1、時(shí)間間隔的處理

前景：最近在做評(píng)論展示的部分，相應(yīng)的評(píng)論時(shí)間的展示需要處理一下后端傳過來的時(shí)間戳，展示成常見的間隔顯示。常見到這個(gè)但是之前沒做過，因此借著這次想記錄一下，可能還有更好的方法不過我暫時(shí)不曉得了。

查閱如何實(shí)現(xiàn)這里的時(shí)候發(fā)現(xiàn) Momentjs里的diff方法很適合，
計(jì)算兩個(gè)時(shí)間的差值-并轉(zhuǎn)換成你需要的單位：
moment(time1).diff(time2, type, boolean)

time1和time2支持類型：Moment|String|Number|Date|Array；

type 支持值為：years, months, weeks, days, hours, minutes, seconds；

boolean 第三個(gè)參數(shù)默認(rèn)為false，即為計(jì)算結(jié)果向下取整（3.2=3; 3.9=3）

例如：計(jì)算當(dāng)前時(shí)間距離2018年1月1號(hào)的 天數(shù)
moment().diff('2018-01-01', 'days'); // 整數(shù)     
moment().diff('2018-01-01', 'days', true); // 小數(shù)

這部分使用解釋摘自：(http://m.itdecent.cn/p/c34eacb3be20)

?點(diǎn)擊跳轉(zhuǎn)至上述使用解釋來源

而且我們項(xiàng)目中之前已經(jīng)引入這個(gè)一個(gè)日期格式處理的庫 ，直接使用就可
Moment.js - JavaScript 日期處理類庫

//具體實(shí)現(xiàn)的代碼

let comTime = t               // 傳入評(píng)論時(shí)間戳  t
let _now = Date.now();       //當(dāng)前時(shí)間

//間隔秒   
let secInterv = this.$moment(_now).diff(this.$moment(comTime), 'seconds') 

// 間隔分鐘  
let minInterv = this.$moment(_now).diff(this.$moment(comTime), 'minutes') 

// 間隔小時(shí) 
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 不足一個(gè)月
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}小時(shí)前`  //幾小時(shí)前
 } else if (dayInterv > 0 && dayInterv < 7) {
      return   `${dayInterv}天前`      //幾天前
 } else if (weekInterv > 0 && weekInterv <= 4) {
      return   `${weekInterv}周前`    //幾周前
 } else if (monthInterv > 0 && monthInterv < 12) {
      return   `${monthInterv}個(gè)月前`  //幾個(gè)月前
 } else if (yearInterv > 0 && yearInterv < 12) {
      return  `${yearInterv}年前前`    //幾年前
 }

后來處理了一下小程序的評(píng)論時(shí)間間隔：

小程序的評(píng)論時(shí)間間隔，這里產(chǎn)品的需求和之前pc端的略有不同
??小程序中評(píng)論時(shí)間間隔處理（按需求）



   * 關(guān)于消息時(shí)間顯示的問題：
   *    一分鐘內(nèi)顯示——?jiǎng)倓?   *    十分鐘內(nèi)顯示——1分鐘前，2分鐘前，3分鐘前。。。。。。十分鐘前
   *    一天內(nèi)顯示時(shí)間——16:36
   *    隔天內(nèi)顯示時(shí)間——昨天16:36
   *    再隔天內(nèi)顯示時(shí)間——日期加16:36（2019-11-11 16:36）   



一開始的寫法：
//評(píng)論 && 回復(fù)時(shí)間的處理
    handleCommentTime(t) {
      //當(dāng)前時(shí)間
      let currTime =  $moment(new Date()).format('YYYY-MM-DD HH:mm:ss')  
      //1分鐘內(nèi) 十分鐘內(nèi)
      let minInterTime = $moment(currTime).diff($moment(t), 'minute') 
      //一天內(nèi)  隔天內(nèi) 
      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('評(píng)論時(shí)間的獲?。?,t,currTime)
      // console.log('評(píng)論時(shí)間間隔的分鐘：',minInterTime)
    },


------------------錯(cuò)誤記錄分割線------------------錯(cuò)誤在審需求實(shí)現(xiàn)上不仔細(xì)------------------

就在我準(zhǔn)備再改一下評(píng)論回復(fù)里的時(shí)間間隔，細(xì)看感覺有點(diǎn)不太對(duì)。。。過于著急，其實(shí)現(xiàn)在的需求用diff里的day處理是不太合適的。

因?yàn)閐iff的一天包括了前一天的某個(gè)時(shí)間點(diǎn)之前，都算在一天內(nèi)。
現(xiàn)在產(chǎn)品的需求不同于之前的一天前。現(xiàn)在的只算當(dāng)天，因此作了以下的修改，
感覺越改實(shí)現(xiàn)的方法越笨拙了哈...
希望后期會(huì)發(fā)現(xiàn)更好的方法??目前的實(shí)現(xiàn)如下


 handleCommentTime(t) {
      console.log('評(píng)論的時(shí)間ttt:',$moment(t).format('YYYY-MM-DD HH:mm:ss'))
      //當(dāng)前時(shí)間,當(dāng)前日
      let currTime =  $moment(new Date()).format('YYYY-MM-DD HH:mm:ss')  
      let currDay = $moment(new Date()).format('DD')  
      //1分鐘內(nèi) 十分鐘內(nèi)
      let minInterTime = $moment(currTime).diff($moment(t), 'minute') 
      //一天內(nèi)  
      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'); 
      }
    },

//調(diào)用上述函數(shù)，去處理評(píng)論時(shí)間間隔
   item.createTime = _this.handleCommentTime(item.createTime) 
   if (item.commentReplyVOList && item.commentReplyVOList.length) {
   item.commentReplyVOList.forEach(secondItem => {
        //處理評(píng)論回復(fù)時(shí)間間隔
        //secondItem.createTime = $moment(secondItem.createTime).format('YYYY-MM-DD HH:mm:ss');
       secondItem.createTime = _this.handleCommentTime(secondItem.createTime) 
            })
          }

2、時(shí)間的格式化處理

??：之前在項(xiàng)目中用moment.js最多的地方就是格式化時(shí)間：

this.$moment(this.monthDays).format("YYYY-MM-DD"); //格式：年 月 日
this.$moment(this.monthDays).format("YYYY-MM-DD HH:mm：ss") //格式:年月日時(shí)分秒

"YYYY-MM-DD" 分別對(duì)應(yīng)：年月日
這個(gè)方式可以處理后端傳來的時(shí)間戳等等

3、獲取到一周前、一個(gè)月之前、一年前等的時(shí)間

前景：之前遇到這種的一般都是在做篩選的時(shí)候處理的，獲取現(xiàn)在一周前的數(shù)據(jù)，現(xiàn)在到一個(gè)月之前的數(shù)據(jù)，現(xiàn)在到一年前的數(shù)據(jù)圖等等需求。

//這個(gè)是一開始用的方法,直接略啰嗦
let month = 30 * 24 * 60 * 60 * 1000;
let seven = 7 * 24 * 60 * 60 * 1000;

// 一個(gè)月之前
    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)
    }

后來發(fā)現(xiàn)momentjs里有方法，可以獲取到之前的時(shí)候以及之后的時(shí)間，研究了一下

一、時(shí)間加：moment().add()方法

nums：時(shí)間差值，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)

`得到一個(gè)時(shí)間對(duì)象如下??：`
Moment {_isAMomentObject: true, _i: Thu Jan 09 2020 09:59:02 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間), _isUTC: false, _pf: {…}, _locale: Locale, …}
_isAMomentObject: true
_i: Thu Jan 09 2020 09:59:02 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) {} //當(dāng)前時(shí)間
_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 (中國標(biāo)準(zhǔn)時(shí)間) {}  //需要的7天后的值，可以格式化一下取到需要的
_isValid: true
__proto__: Object

同理獲取當(dāng)前時(shí)間為時(shí)間戳也可以取到七天后的時(shí)間
let afterSeven =this.$moment(new Date()).add(7,'days')   
 // this.$moment(new Date()).add(7,'days')

`時(shí)間對(duì)象`：

Moment {_isAMomentObject: true, _i: 1578535334769, _isUTC: false, _pf: {…}, _locale: Locale, …}
_isAMomentObject: true
_i: 1578535334769    //當(dāng)前時(shí)間   區(qū)別在當(dāng)前時(shí)間的取值不同，時(shí)間對(duì)象內(nèi)的當(dāng)前展示也不同，這里是時(shí)間戳的格式
_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 (中國標(biāo)準(zhǔn)時(shí)間) {}  //需要的7天后的值，可以格式化一下取到需要的
_isValid: true
__proto__: Object


最終需要的標(biāo)準(zhǔn)格式時(shí)間:
時(shí)間對(duì)象：Moment {_isAMomentObject: true, _i: 1578563368883, _isUTC: false, _pf: {…}, _locale: Locale, …} 
格式化處理：let weekget = this.$moment(afterSeven).format('YYYY-MM-DD')
//2020-01-02

一周： add中設(shè)置為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') //一個(gè)月前

let afterSeven = this.$moment(new Date()).add(-1,'month')
let monthGet = this.$moment(afterSeven).format('YYYY-MM-DD') //2019-12-09

//翻到最最之前很心酸的獲取一個(gè)月之前的方法?? 寫過就還是記錄一下了

const data = new Date()
const currentDate = this.$moment(data).format("YYYY-MM-DD")
console.log('獲取當(dāng)前的日期=============',currentDate)
this.getNowData()


//日期的默認(rèn)展示--獲取當(dāng)前日期 ，一個(gè)月之前
    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"); //月份頭部補(bǔ)全（補(bǔ)充為兩位數(shù)‘0’
      nowDate = nowDate.toString().padStart(2, "0"); //日期補(bǔ)全
      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，這些同理可得

二、時(shí)間減：moment(time).subtract(num, type)

nums：時(shí)間差值，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 得到的時(shí)間對(duì)象：`
Moment {_isAMomentObject: true, _i: Thu Jan 09 2020 18:29:37 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間), _isUTC: false, _pf: {…}, _locale: Locale, …}
_isAMomentObject: true
_i: Thu Jan 09 2020 18:29:37 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) {}
_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 (中國標(biāo)準(zhǔn)時(shí)間) {}
_isValid: true
__proto__: Object

還有moment.duration,moment.utc等方法
等等等，好多之前未用到的，之后也可以用下再來記錄

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容