消息提示时间的格式化例子(小程序)
时间: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())
}
}
}
- 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 数组属性和方法
- 30 个Python代码实现的常用功能,精心整理版
- Java 后台开发面试题分享一
- IDEA 报错:no tests were found 和 UnsupportedOperationException
- Angular sandbox项目的tsconfig.json内容一览
- Java 后台开发面试题分享二
- axios 进行同步请求(async+await)
- Axios 各种请求方式传递参数格式
- axios POST提交数据的三种请求方式写法
- Json对象和Json字符串的区别
- 合并/拆分 Excel?Python、VBA轻松自动化
- (数据科学学习手札96)在geopandas中叠加在线地图
- 秋天的第一杯奶茶该买哪家?Python 爬取美团网红奶茶店告诉你
- AttributeError: NoneType object has no attribute‘’
- tf.control_dependencies(control_inputs)
- tf.get_collection()