消息提示时间的格式化例子(小程序)
时间:2022-07-22
本文章向大家介绍消息提示时间的格式化例子(小程序),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
做消息功能是,需要展示小时创建时间与当前时间的间隔, 例如: 一分钟前, 一小时前, 7-22 等
这里写了一个无依赖的格式化工具
使用例子
const time = '2020-07-23 13:13:11'
// 当前时间 '2020-07-23 13:13:20'
noticeTimeFormat(time)
// --> 一分钟前
// 不足一分钟,按照一分钟算
实现
/**
* 时间间隔
*/
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOURS = 60 * MINUTE
const DAY = 24 * HOURS
interface I_TimeInterval {
day: number
hours: number
minute: number
}
/**
* 获取时间间隔
* @param startTime Date 开始时间
* @param endTime Date 结束时间
* @returns { day, hours, minute }
*/
function timeInterval(startTime:Date, endTime:Date):I_TimeInterval{
const interval = endTime.getTime() - startTime.getTime()
const minute = Math.floor(interval % DAY % HOURS / MINUTE)
const hours = Math.floor(interval % DAY / HOURS )
const day = Math.floor(interval / DAY )
return { day, hours, minute }
}
/**
* 时间间隔格式化
* @param { day, hours, minute }
*/
function formatTime({ day, hours, minute }:I_TimeInterval):string{
// 不足一分钟 按照一分钟算
if( !day&&!hours&&!minute ){
minute = 1
}
return `${day ? `${day}天` : '' }${hours||day ? `${hours}小时` : '' }${minute ? `${minute}分钟` : '' }`
}
// 小程序内 时间不支持 " / " 分割
function createIosDate(timeStr:string):Date{
timeStr = timeStr || ''
return new Date(timeStr.replace(/-/g, '/').replace(/T/g, ' ') )
}
/**
* 时间格式化
* @param fmt string 格式 YYYY/mm/d HH:MM:SS
* @param date Date 时间对象
*/
function dateFormat(fmt:string, date:Date) {
let ret;
let opt = {
"Y+": date.getFullYear().toString(),
"m+": (date.getMonth() + 1).toString(),
"d+": date.getDate().toString(),
"H+": date.getHours().toString(),
"M+": date.getMinutes().toString(),
"S+": date.getSeconds().toString()
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : opt[k].length > 1 ? opt[k] : `0${opt[k]}` )
};
};
return fmt;
}
/**
* 消息提示时间
* @param timeStr
*/
export function noticeTimeFormat(timeStr:string):string|undefined{
const formats = [
time => dateFormat(`YYYY-mm-dd`, time), // 年
time => dateFormat(`mm-dd`, time), // 月
time => dateFormat(`mm-dd`, time), // 天
time => dateFormat(`HH:MM`, time), // 小时-分钟
(start, end) => `${formatTime( timeInterval(start, end) )}前`, // 分钟
time => '一分钟前' // 秒
]
const [ startList, nowList ] = [ createIosDate(timeStr), new Date() ]
.map(item => dateFormat(`YYYY:mm:dd:HH:MM:SS`, item).split(':').map(item => parseInt(item)))
for( let i = 0; i < startList.length; i++ ){
if( nowList[i] > startList[i] ){
return formats[i]( new Date(createIosDate(timeStr)), new Date())
}
}
}
- 代码审查工具StyleCop
- 实用工具特别推荐 Robocopy GUI
- 七牛镜像存储 WordPress 插件 的代码化
- WordPress 会自动压缩JPEG 格式的图像?
- jquery操作DOM 元素(2)
- WordPress 中部署真正的懒加载(Lazy Load)
- 图形化的2008R2 Server Core 配置管理工具
- 各种浏览器的userAgent
- WordPress 根据浏览器 user-agent 按需加载CSS 文件
- memcached的最新状态
- [程序设计语言]-01:引言
- ASP.NET Ajax 库
- ASP.NET进程优化
- 多说 提速:js内页页脚加载、静态文件CDN
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理
- Xcode12适配The linked library is missing one or more architectures required by this target问题
- [译] VueJS 中更好的组件组合方式
- 无异常日志,就不能排查问题了???
- 带你跳出源码地狱,从原理上理解MyBatis对Spring源码的扩展实现
- 网上翻译嫌麻烦?Python破解有道JS加密,让你随时能翻译
- 前端模块化开发--React框架(一): 入门和面向组件编程
- Python爬虫实战练习:爬取美团旅游景点评论数据
- Python爬虫实战:爬取链家网二手房数据
- 前端模块化开发--ES6相关知识
- (一)ROS开发平台环境搭建与测试
- 前端模块化开发--Node基础&&WebPack模块化开发
- CNN神经网络--手写数字识别
- 关于模型预测结果好坏的几个评价指标
- SpringBoot微服务架构项目--Union社交平台