vue+原生js仿钉钉做聊天时间处理

聊天记录 列表显示时间+聊天框显示时间
    一分钟：显示刚刚
    一小时内：显示多少分钟之前
    今日：显示小时+分钟
    昨日：显示 昨天+小时+分钟
    今年：显示：月份+日期
    不属于今年：显示：年月日+小时+分钟

代码逻辑

以下函数都写在comment.js文件下

主函数

解释：
    聊天的时间逻辑
        传递 timeValue的格式为 2021/03/24 13:56:00
    如果数据是'2015-08-18 15:13:15';参考下述进行转换
        // var str ='2015-08-18 15:13:15';
        // str = str.replace(/-/g,"/");
        // var date = new Date(str );

    function timeChange (timeValue) {
      timeValue = new Date(timeValue).getTime()
      var timeNew = new Date().getTime() // 当前时间
      // console.log('传入的时间', timeValue, timeNew)
      var timeDiffer = timeNew - timeValue // 与当前时间误差
      // console.log('时间差', timeDiffer)
      var returnTime = ''
      if (timeDiffer <= 60000) { // 一分钟内
        returnTime = '刚刚'
      } else if (timeDiffer > 60000 && timeDiffer < 3600000) { // 1小时内
        returnTime = Math.floor(timeDiffer / 60000) + '分钟前'
      } else if (timeDiffer >= 3600000 && timeDiffer < 86400000 && isYestday(timeValue) === false) { // 今日
        returnTime = formatTime(timeValue).substr(11, 5)
      } else if (timeDiffer > 3600000 && isYestday(timeValue) === true) { // 昨天
        returnTime = '昨天' + formatTime(timeValue).substr(11, 5)
      } else if (timeDiffer > 86400000 && isYestday(timeValue) === false && isYear(timeValue) === true) { // 今年
        returnTime = formatTime(timeValue).substr(5, 11)
      } else if (timeDiffer > 86400000 && isYestday(timeValue) === false && isYear(timeValue) === false) { // 不属于今年
        returnTime = formatTime(timeValue).substr(0, 16)
      }
      return returnTime
    }

次函数

    函数isYestday：是否为昨天 返回 true or false
    这里根据日期进行判断，而非时间戳数值，因为数值计算涉及到大数有一定的误差

    function isYestday (timeValue) { // 是否为昨天
      const date = new Date(timeValue)
      const today = new Date()
      if (date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth()) {
        if (date.getDate() - today.getDate() === 1) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }

    function isYear (timeValue) { // 是否为今年
      const dateyear = new Date(timeValue).getFullYear()
      const toyear = new Date().getFullYear()
      // console.log(dateyear, toyear)
      if (dateyear === toyear) {
        return true
      } else {
        return false
      }
    }

函数：formatTime  格式化时间 返回时间字符串如   2018-07-06 11:11:37

    function formatTime (date) {
     var t = getTimeArray(date)
      return [t[0], t[1], t[2]].map(formatNumber).join('-') + ' ' + [t[3], t[4], t[5]].map(formatNumber).join(':')
    }
    
   function getTimeArray (date) {
     date = new Date(date)
     var year = date.getFullYear()
     var month = date.getMonth() + 1
     var day = date.getDate()
     var hour = date.getHours()
     var minute = date.getMinutes()
     var second = date.getSeconds()
     return [year, month, day, hour, minute, second].map(formatNumber)
   }
   
   // 转化日期 如2018-7-6 -->(2018-07-06)
   function formatNumber (n) {
     n = n.toString()
     return n[1] ? n : '0' + n
   }

本文只做记录

原文链接