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

最新推荐文章于 2024-05-17 16:45:39 发布

学web的碎碎

最新推荐文章于 2024-05-17 16:45:39 发布

阅读量577

点赞数 1

分类专栏： JavaScript + jQuery 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_42695298/article/details/117126431

版权

本文展示了如何在前端项目中仿照微信对话列表，动态显示时间，包括‘昨天’、具体时间等格式。通过将日期转换为时间戳，与当前时间和前一天时间戳比较，来决定显示的具体时间信息。

摘要由CSDN通过智能技术生成

介绍

本篇文章要展示的效果是类似于微信对话列表页面，每条列表右侧的时间，一般在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(