仿微信列表显示时间（年月日、昨天、时间）

介绍

本篇文章要展示的效果是类似于微信对话列表页面，每条列表右侧的时间，一般在IM项目中用的比较多。
效果图如下、

效果图

思路

• 把 xxxx年xx月xx日格式日期转换为时间戳
• 获取当前实时时间的时间戳
• 获取当前日期前一天时间戳
• 传入值和昨日时间戳对比，大于今天小于昨天就显示昨天
• 传入值和当前时间 二者的时间戳进行对比，然后在判断上午还是下午即可展示

源码

var timeText = getTimeText('2021-05-20 12:00:00');
console.log(timeText);

//历史时间显示
//时间统一函数
function getTimeText(argument) {
  var timeS = argument;
  var todayT = ''; //
  var yestodayT = '';
  var timeCha = getTimeS(timeS);
  timeS = timeS.slice(-8);
  todayT = new Date().getHours() * 60 * 60 * 1000 + new Date().getMinutes() * 60 * 1000 + new Date().getSeconds() * 1000;
  yestodayT = todayT + 24 * 60 * 60 * 1000;
  if (timeCha > yestodayT) {
    return argument.slice(0, 11).slice(5);
  }
  if (timeCha > todayT && timeCha < yestodayT) {
    // return timeS.slice(0, 2) > 12 ? '昨天 下午' + (timeS.slice(0, 2) == 12 ? 12 : timeS.slice(0, 2) - 12) + timeS.slice(2, 5) : '昨天 上午' + timeS.slice(0, 5);
    return '昨天';
  }
  if (timeCha < todayT) {
    return timeS.slice(0, 2) >= 12 ? '下午' + (timeS.slice(0, 2) == 12 ? 12 : timeS.slice(0, 2) - 12) + timeS.slice(2, 5) : '上午' + timeS.slice(0, 5);
  }
}

//时间戳获取
function getTimeS(timeS) {
  // var timeS = argument;
  timeS = timeS.replace(/[-]/g, '/');
  return new Date().getTime() - new Date(timeS).getTime() - 1000; //有一秒的误差
}

// 时间戳转年月日
function formatDate(data) {
    let now = new Date(data);
    var year = now.getFullYear(); //取得4位数的年份
    var month = now.getMonth() + 1 < 10 ? ('0' + (now.getMonth() + 1)) : now.getMonth() + 1;
    var date = now.getDate() < 10 ? ('0' + now.getDate()) : now.getDate();
    var hour = now.getHours() < 10 ? ('0' + now.getHours()) : now.getHours();
    var minute = now.getMinutes() < 10 ? ('0' + now.getMinutes()) : now.getMinutes();
    var second = now.getSeconds() < 10 ? ('0' + now.getSeconds()) : now.getSeconds();
    return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}