聊天时间格式的显示

本文介绍了一个用于处理和显示时间的JavaScript函数,该函数能够根据时间差返回特定格式的时间字符串,如'上午'、'下午'、'昨天'等,适用于各种时间场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

function getTime(argument) {
		 var Time = argument;
		 var todayT = ''; 
		 var yestodayT = '';
		 var timeCha = parseInt(new Date().getTime() - new Date(Time).getTime()-1000);
//	     var timeCha = parseInt(new Date().getTime() - new Date(Time.replace(/-/g, "/")).getTime()-1000);  小程序ios时间兼容
		 Time = Time.slice(-8);
		 todayT = new Date().getHours() * 60 * 60 * 1000 + new Date().getMinutes() * 60 * 1000 + new Date().getSeconds() * 1000;
		 yestodayT = todayT + 24 * 60 * 60 * 1000;
		 beforeyesT = yestodayT + 24 * 60 * 60 *1000;
		 if(timeCha > beforeyesT) {
			  return Time.slice(0, 15);
	     }
		 if(timeCha > yestodayT && timeCha < beforeyesT) {
			  return Time.slice(0, 2) > 12 ? '前天 下午' + (Time.slice(0, 2) == 12 ? 12 : Time.slice(0, 2) - 12) + Time.slice(2, 5) : '前天 上午' + Time.slice(0, 5);
		 }
		 if (timeCha > todayT && timeCha < yestodayT) {
			  return Time.slice(0, 2) > 12 ? '昨天 下午' + (Time.slice(0, 2) == 12 ? 12 : Time.slice(0, 2) - 12) + Time.slice(2, 5) : '昨天 上午' + Time.slice(0, 5);
		 }
		 if (timeCha < todayT) {
			  return Time.slice(0, 2) >= 12 ? '下午' + (Time.slice(0, 2) == 12 ? 12 : Time.slice(0, 2) - 12) + Time.slice(2, 5) : '上午' + Time.slice(0, 5);
	 	 }
 }
### 实现 UniApp 聊天界面中的时间显示 为了在 UniApp 的聊天界面上正确显示每条消息的时间,可以采用如下方法: #### 数据结构设计 对于每一条消息对象,在其属性中加入 `time` 字段用于存储该消息发出的具体时刻。通常情况下,这个字段会在服务器端创建消息记录的时候自动生成并返回给客户端。 ```javascript const message = { content: '这是一条测试消息', fromUser: true, // 是否来自当前用户 time: new Date().toLocaleTimeString() // 使用本地时间格式化函数获取具体发送时间 }; ``` #### 组件模板编写 在 Vue 单文件组件 (SFC) 或者其他形式的消息列表渲染逻辑里,遍历所有消息数据项的同时插入对应的时间标签节点[^1]。 ```html <template> <view class="message-item"> <!-- 显示消息内容 --> {{ item.content }} <!-- 小字显示消息时间 --> <text class="timestamp">{{ formatTime(item.time) }}</text> </view> </template> <script> export default { methods: { // 时间转换成友好格式的方法 formatTime(timeStamp){ const dateObj = new Date(timeStamp); return `${dateObj.getHours()}:${String(dateObj.getMinutes()).padStart(2,'0')}`; } } } </script> <style scoped> .timestamp{ font-size: smaller; color:#9e9e9e ; } </style> ``` 上述代码片段展示了如何定义一个简单的消息项目布局,并且包含了将原始时间戳转化为更易读取的形式的功能。这里假设传入的是 JavaScript 的日期字符串;如果是 Unix 时间戳,则需先将其解析为 `Date` 对象再做进一步处理。 #### 动态更新机制 考虑到实际应用场景下可能存在的网络延迟等因素影响,建议设置定时器定期检查最新收到的信息是否有未被及时呈现出来的情况,必要时触发视图重绘操作来确保 UI 同步最新的状态变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值