前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >聊天IM的时间戳显示规则

聊天IM的时间戳显示规则

作者头像
meteoric
发布于 2018-11-19 10:29:31
发布于 2018-11-19 10:29:31
4.9K0
举报
文章被收录于专栏:游戏杂谈游戏杂谈

======================================================

以下规则是在体验微信操作后,推测出来的规则,可能存在一些不准确的表述

======================================================

参考基准

当处于正在聊天时,聊天内容比聊天时间更为重要,尽量避免时间和发送状态对聊天内容的干扰,简化界面,仅保留最核心的信息:发送者、发送内容。

Badge(未读消息数量)

当消息数量达到三位数时(也即消息数量 > 99),显示…而非数字,缓解/减轻强迫症患者的心理压力

时间戳显示

时间戳由客户端自行处理,时间戳的显示根据不同的场景进行显示,可参考下面几种典型的使用场景,但无论怎么显示,消息之间超过5分钟都需要显示时间戳了。

###点击聊天列表,进入聊天详情时(单聊或群聊)

1)获取数据

获取最近最多20条数据(20条为一页数据,超过20条时只取最近的20条,少于20条时有多少取多少)

2)显示数据

获取第一条消息的接收时间,然后将这个时间戳插入到界面并记录下来(假设使用变量lastShowTimeStamp进行记录),然后将消息按时间戳(从小到大排序,老消息在前新消息在后),追加到界面中,但需要注意时间戳的显示规则。

循环遍历每条消息时,需要判断该消息的接收时间与最后一次显示时间戳的时间间隔,当大于5分钟(300ms)时则再追加一条时间戳,同时更新lastShowTimeStamp的值。

###时间戳的显示规则

一天内的消息显示为:“昨天 时:分”

二天至七天内显示为:“星期X 时:分”

当大于7天时显示为:“YYYY年X月X日时:分”

时、分不足二位时,前面用0补齐,月、日不足二位时不补位。如:2016年7月13日 09:22,注意计算天数是要算天,不能拿毫秒进行比较。否则昨天上午的消息,在今天下午看时将会变成“星期X 09:10”,正确的应该是“昨天 09:10”

示例截图如下:

###聊天ing

当收到新消息时,判断当前收到的消息与lastShowTimeStamp之间的间隔,大于5分钟时就显示时间戳,同时更新lastShowTimeStamp的值为当前新消息收到的时间戳。

会出现一种情况,当5分钟内,消息很频繁而导致消息量达到100条,那么这一千条数据中间是没有任何时间戳的。如果退出聊天界面再重新进入时,参考第一条规则。

示例截图:

###当向下拉取消息时

向上拉取消息时,获取向上的20条数据(一页,不足一页时有多少取多少),然后根据第一条的规则来显示。

先显示时间戳,然后判断每一条时间戳与上一次显示的时间戳进行比较,间隔大于5分钟时显示新的时间戳,唯一与第一条规则不同的是,此时不要更新lastShowTimeStamp的值。因为lastShowTimeStamp的值是用来判断新消息的,老消息需要判断的话使用一个临时变量记录即可,拉取并显示完一页数据就丢弃掉了。

会出现一种情况,就是向上拉取消息时,你会遇到同一分钟内发送的消息各有一个时间戳,而且时间戳是相同的。出现的原因是消息分属在二页内了

示例截图如下:

###删除单条消息时

删除一条消息时,如果被删除的消息上一条是时间戳,而下一条不是一条消息记录时就将时间戳一并删除掉。

这样会导致一种情况,时间戳被删除掉之后,lastShowTimeStamp并没有进行更新,如果此时再接收到新消息时,它不会再显示时间戳,直到新消息超过5分钟的间隔才重新显示时间戳并更新lastShowTimeStamp的值。删除完消息后检查当前消息数,少于一页时自动再加载上一页数据,直至没有消息可供加载。

示例截图如下(第一张图是正常的,第二张图是非正常的,退出聊天重新进入或等5分钟之后便可恢复正常):

###批量删除消息时

规则与单删类似,唯一的不同的,当选中某一行时需要向上、向下遍历。

向上遍历时:

如果上一条消息是未选中状态,中止向上查找;

如果上一条消息是选中状态,继续向上不断查找,直到找到未选中消息(中止)、找到时间戳(记录下该时间戳的位置,然后向下遍历);

向下遍历时:

如果下一条消息是未选中状态,记录的时间戳位置清除,中止向下查找;

如果下一条消息是选中状态,继续向下不断查找,直到找到未选中消息(中止并清除)、找到时间戳(成功找到,也就是向前是一个时间戳,向后也是一个时间戳或是最后一条消息也记录向上查找到的时间戳)

注:批量删除时,一次最多能选择删除100条数据。消息删除后,需要判断当前消息数量是否够一页(20条),不够就再向上加载一页数据(20条);

在点击删除时,一次性进行删除操作,避免遍历影响性能。

示例截图如下:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-07-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
7款让人惊叹的HTML5粒子动画特效(转载)
这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。
lin_zone
2018/08/15
6.9K1
7款让人惊叹的HTML5粒子动画特效(转载)
分享7款超赞的CSS3动画效果,值得你收藏!
今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。
IT大咖说
2018/10/23
2.8K0
分享7款超赞的CSS3动画效果,值得你收藏!
30个最优CSS动画案例分享,轻松让网页用户随心而“动”
CSS或CSS3动画,包括常见的鼠标悬停动画,网页加载动画,页面切换动画,文本动画以及背景动画等等,能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/CSS3动画设计能够迅速蹿升为网页设计一大流行趋势的重要原因。
奔跑的小鹿
2020/01/13
47.7K0
30个最优CSS动画案例分享,轻松让网页用户随心而“动”
炫酷的CSS3 loading加载动画,总有一款适合你
这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共9种效果,都是使用:before和:after伪元素,以及CSS帧动画来完成各种不同的预加载指示器动画。 1.CSS发光加载动画 2.彩色圆环加载动画 3.纯CSS加载程动画 4.平面预加载动画 5.守望先锋加载动画 6.9个CSS加载动画 7.SVG心形加载动画 8.WIFI加载动画 9.CSS立方体加载动画 源码已上传网盘,关注公众号【青年码农】-【Acmen1024】 回
青年码农
2020/10/13
3K0
炫酷的CSS3 loading加载动画,总有一款适合你
比 Animation.css 还要炫酷的动画库插件
micron.js是一款可生成炫酷 CSS3 动画的js动画库插件。通过 micron.js 插件,你可以为页面的任意DOM元素添加12种炫酷 CSS3 动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。
用户7293182
2022/01/20
8090
5个让页面"活"起来的CSS特效
随着越来越多的浏览器对CSS3支持的不断完善,设计师和开发者们有了更多的选择去实现一些炫酷特效。小师妹整理了最近项目中使用到的5个比较实用的CSS3动画演示。让我们一起看看CSS3是如何让页面秀起来的。
程序员老鱼
2022/12/02
1.3K0
HTML5炫酷流星动画特效教程
这是一款HTML5炫酷光粒子动画特效。该特效通过js在页面中生成canvas元素,并通过算法在其中生成炫酷的光粒子动画特效。 使用方法
用户5997198
2019/08/09
10.4K1
HTML5炫酷流星动画特效教程
十套充满逼格的css动画交互设计!UI看了都自愧不如
对于网页设计师和开发工程师而言,创建一款极具趣味性和实用性的CSS网页动画,能让网站美观不少
程序员老鱼
2022/12/02
1.6K0
前端-10款web动画插件
今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名称,即可将对应分类下的图片以瀑布流的方式展示出来,这款插件在筛选图片上使用还是比较方便的。
grain先森
2019/03/29
6.3K0
前端-10款web动画插件
情人节程序员用HTML网页表白【彩色酷炫的空间背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
IT司马青衫
2022/08/20
8450
情人节程序员用HTML网页表白【彩色酷炫的空间背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
直接上源码教你做经典HTML5小游戏
HTML5因其跨平台性的特质已逐渐成为网络游戏开发的热门新技术。过去,flash多媒体应用可以用来构建线上游戏,也是小游戏的主流形态,但是随着HTML5的到来,改变了线上游戏的构建方法,用HTML5制作游戏相比flash更加灵活方便。
IT大咖说
2018/10/23
7.6K2
直接上源码教你做经典HTML5小游戏
历时4个多月,学习了这 66 个CSS 特效
这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱和的,都是挤出来的。我们是9点上班,我基本7点半就到公司自学了,这样我就有一个半小时的时间来做这些了。
前端小智@大迁世界
2020/07/21
5.3K0
【案例】SVG卡通赛车加载动画特效
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源
用户1730674
2020/05/22
9570
【案例】SVG卡通赛车加载动画特效
前端工程师必备的css3动画技巧(附源码)
本文是笔者之前文章用css3实现惊艳面试官的背景即背景动画(高级附源码)的续篇也是介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一方面也是希望能教大家一些实用的技巧和高效开发css的方式,以提高在工作中的效率。
徐小夕
2020/12/08
5370
前端工程师必备的css3动画技巧(附源码)
3D特效|精选6款超漂亮炫酷的CSS源码
还是老样子,代码已上传到网盘,获取源码请关注公众号【青年码农】回复【3D特效】即可。
青年码农
2020/10/13
1.7K0
3D特效|精选6款超漂亮炫酷的CSS源码
【案例】如何用html5 制作canvas酷炫的网状图形动画特效
话不多说,咱们书归正传!今天段老师要给同学们介绍的是一款基于html5 canvas实现酷炫的网状几何图形变换动画特效源码。
用户1730674
2019/10/23
1.8K0
情人节程序员用HTML网页表白【七夕告白相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
IT司马青衫
2022/08/20
8320
情人节程序员用HTML网页表白【七夕告白相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
H5纯CSS3逼真的卡通大象走路动画特效
这是一款使用纯CSS3制作的非常逼真的卡通大象走路动画特效的代码。该卡通大象的所有元素都是使用CSS来生成,大象行走动画使用CSS animation来制作,整体效果非常协调。
用户5997198
2019/08/15
1.2K0
动图展示 60+ 个前端常用插件库合集
https://segmentfault.com/a/1190000019151460
@超人
2021/07/05
7K0
HTML5 Canvas和jQuery实时天气预报代码解析「附源码」
这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用CSS3帧动画来制作各种动画效果。
用户5997198
2019/08/09
1.6K0
HTML5 Canvas和jQuery实时天气预报代码解析「附源码」
推荐阅读
相关推荐
7款让人惊叹的HTML5粒子动画特效(转载)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档