美文网首页
vue+原生js仿钉钉做聊天时间处理

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

作者: qjsxq | 来源:发表于2022-05-11 12:48 被阅读0次
    聊天记录 列表显示时间+聊天框显示时间
        一分钟:显示刚刚
        一小时内:显示多少分钟之前
        今日:显示小时+分钟
        昨日:显示 昨天+小时+分钟
        今年:显示:月份+日期
        不属于今年:显示:年月日+小时+分钟
    
    

    代码逻辑

    以下函数都写在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
       }
    
    

    本文只做记录

    原文链接

    相关文章

      网友评论

          本文标题:vue+原生js仿钉钉做聊天时间处理

          本文链接:https://www.haomeiwen.com/subject/bnudurtx.html