js封装毫秒时间戳转换仿微信聊天时间显示格式

js封装毫秒时间戳转换仿微信聊天时间显示格式


先把微信的时间显示规则拍上来

微信聊天消息时间显示说明
1、当天的消息,以每5分钟为一个跨度的显示时间;
2、消息超过1天、小于1周,显示星期+收发消息的时间;
3、消息大于1周,显示手机收发时间的日期。
个人补充说明:
1.如果时间的年份是今年以前的,则会展示:2020年04月21日 下午 18:02
2.如果是今年的,则展示:03月21日 下午 18:02

然后废话不多说,代码直接贴上。顺手附带了几个小方法

import {
      formatTime2 } from './util'

// 星期格式转换 0-6:周日到周六
function weekFormat(e, prefix = "周") {
     
  switch (e) {
     
    case 0:
      return prefix + "日"
      break;
    case 1:
      return prefix + "一"
      break;
    case 2:
      return prefix + "二"
      break;
    case 3:
      return prefix + "三"
      break;
    case 4:
      return prefix + "四"
      break;
    case 5:
      return prefix + "五"
      break;
    case 6:
      return prefix + "六"
      break;
    default:
      return ""
      break;
  }
}
// 转换今日的时辰格式
function todayTimeFormat(e) {
     
  if (e >= 0 && e < 7) {
     
    return "凌晨"
  } else if (e >= 7 && e < 11) {
     
    return "上午"
  } else if (e >= 11 && e < 13) {
     
    return "中午"
  } else if (e >= 13 && e < 18) {
     
    return "下午"
  } else if (e >= 18 && e < 24) {
     
    return "晚上"
  } else {
     
    return ""
  }
}


// 仿微信时间显示格式转换 @time 时间戳毫秒
function weChatTimeFormat(time) {
     
  const today = new Date().getTime()
  // 当前时间减去获取到的时间
  const sub = today - time
  const day = 1000 * 60 * 60 * 24
  const week = day * 7
  const timeDate = new Date(time)
  const currentYear = new Date().getFullYear()
  const getYear = new Date(time).getFullYear()
  const HHmm = `${
       timeDate.getHours() + 1}:${
       timeDate.getMinutes() + 1}`
  if (currentYear > getYear) {
     
    return `${
       formatTime2("yyyy年MM月dd日", timeDate)} ${
       todayTimeFormat(timeDate.getHours())} ${
       formatTime2("hh:mm", timeDate)}`
  } else if (sub > week) {
     
    return `${
       formatTime2("MM月dd日", timeDate)} ${
       todayTimeFormat(timeDate.getHours())} ${
       formatTime2("hh:mm", timeDate)}`
  } else if (sub > day && sub < day * 2) {
     
    return `昨天 ${
       HHmm}`
  } else if (sub > day && sub < week) {
     
    return `${
       weekFormat(timeDate.getDay())} ${
       HHmm}`
  } else {
     
    return HHmm
  }
}

module.exports = {
     
  weekFormat,
  todayTimeFormat,
  weChatTimeFormat
}

接下来这里是那个formatTime2,之前同事从网上直接拿来的,我就图省事直接拿来了

//时间格式化兼容 ios
function formatTime2(fmt, timestamp) {
     
  var date = new Date(timestamp) // 兼容safari
  var o = {
     
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),
    'q+': Math.floor((date.getMonth() + 3) / 3),
    'S': date.getMilliseconds()
  }
  if (/(y+)/.test(fmt)) {
     
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  for (var k in o) {
     
    if (new RegExp('(' + k + ')').test(fmt)) {
     
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    }
  }
  return fmt
}
module.exports = {
     
  formatTime2: formatTime2
}

整体还是比较简单的一个小方法的,是我这次写小程序客服功能时顺手写的,为了以后方便也为了造福各位懒人,分享给大家。

你可能感兴趣的:(javascript,小程序,html5)