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

介绍

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

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

python time,datetime当前时间，昨天时间，时间戳和字符串的转化
由于在使用经常会用到time 模块,所以把经常使用到方法记录下来. 首先把所有需要用到的模块导入进来: import time, datetime 1.当前时间-时间戳 # 当前时间戳 current ...
java calendar字符串显示_Java获取当前时间年月日、时间格式化打印、字符串转日期...
package com.sysc.simple; import java.text.ParseException; import java.text.SimpleDateFormat; import ...
android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
Java仿微信时间显示
Java仿微信时间显示需求代码实现 1.dto类设计 2.controller层 3.service层 4.时间格式化(service层) 4.分组函数(service层) 总结需求微信聊天消 ...
android格式化时间中文版,Android 仿微信聊天时间格式化显示功能
本文给大家分享android仿微信聊天时间格式化显示功能. 在同一年的显示规则: 如果是当天显示格式为 HH:mm 例:14:45 如果是昨天,显示格式为昨天 HH:mm 例:昨天 13:12 如果 ...
java 友好时间显示_仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]...
本文为原创分享,转载请注明出处. 1.引言即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成"年/月/日时: ...
仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]
本文为原创分享,转载请注明出处. 1.引言即时通讯IM应用中的聊天消息时间显示是个再常见不过的需求,现在都讲究用户体验,所以时间显示再也不能像传统软件一样简单粗地暴显示成"年/月/日时: ...
js封装毫秒时间戳转换仿微信聊天时间显示格式
js封装毫秒时间戳转换仿微信聊天时间显示格式先把微信的时间显示规则拍上来微信聊天消息时间显示说明 1.当天的消息,以每5分钟为一个跨度的显示时间: 2.消息超过1天.小于1周,显示星期+收发消息的 ...
android 仿微信聊天时间格式化显示
仿微信聊天时间格式化显示. 在同一年的显示规则: 如果是当天显示格式为 HH:mm 例:14:45 如果是昨天,显示格式为昨天 HH:mm 例:昨天 13:12 如果是在同一周显示格式为周一 H ...

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

介绍

效果图

思路

源码

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

最新文章

热门文章