文章目录
- 将秒转换成简单时间格式
- 方式一 表格渲染
- 方式二 js转换
- 将时间转换为字符串
- 方式一 年、月、日、时、分、秒、星期等信息
- 方式二 返回多久之前的时间
将秒转换成简单时间格式
方式一 表格渲染
element-ui 表格为例，duration 单位为秒
<el-table-column v-if="columns.visible('duration')" prop="duration" label="时长" sortable="custom" :class-name="getSortClass('duration')">
<template slot-scope="scope">
<span>{{ (parseInt(scope.row.duration / 3600) < 10 ? '0' + parseInt(scope.row.duration / 3600) : parseInt(scope.row.duration / 3600)) + ':' + (parseInt(scope.row.duration % 3600 / 60) < 10 ? '0' + parseInt(scope.row.duration % 3600 / 60) : parseInt(scope.row.duration % 3600 / 60)) + ':' + (parseInt(scope.row.duration % 3600 % 60) < 10 ? '0' + parseInt(scope.row.duration % 3600 % 60) : parseInt(scope.row.duration % 3600 % 60)) }}</span>
</template>
</el-table-column>
方式二 js转换
js中处理转换， duration 单位为秒
const hour = parseInt(duration / 3600) < 10 ? '0' + parseInt(duration / 3600) : parseInt(duration / 3600)
const min = parseInt(duration % 3600 / 60) < 10 ? '0' + parseInt(duration % 3600 / 60) : parseInt(duration % 3600 / 60)
const sec = parseInt(duration % 3600 % 60) < 10 ? '0' + parseInt(duration % 3600 % 60) : parseInt(duration % 3600 % 60)
const time = hour + ':' + min + ':' + sec
效果如图：
将时间转换为字符串
方式一 年、月、日、时、分、秒、星期等信息
以下这个方法是用来将时间转换为字符串的。它接受两个参数：时间和格式。时间可以是对象、字符串或数字，格式是一个字符串。如果不传入格式，默认使用"{y}-{m}-{d} {h}:{i}:{s}"的格式。
首先，方法会判断传入的时间是否为空，如果是，则返回null。然后，根据时间的类型，将其转换为Date对象。接着，根据传入的格式，将日期对象中的年、月、日、时、分、秒、星期等信息替换到格式字符串中。最后，返回替换后的字符串。
可以根据需要修改time和option的值来获取不同格式的时间字符串。
例如，如果传入时间为"2021-01-01"，格式为"{y}年{m}月{d}日"，则返回"2021年01月01日"。
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string}
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'undefined' || time === null || time === 'null') {
return ''
} else if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
使用示例：
import { parseTime } from '路径/parseTime.js'
const time = new Date() // 获取当前时间
const format = '{y}-{m}-{d} {h}:{i}:{s}' // 设置格式
const result = parseTime(time, format) // 调用方法
console.log(result) // 输出转换后的时间字符串
方式二 返回多久之前的时间
以下这个方法是用来将时间转换为字符串的。它接受两个参数：时间和选项。时间可以是一个数字，选项是一个字符串。如果时间是一个10位数的数字，方法会将其转换为毫秒级的时间戳。然后，根据当前时间和传入的时间计算时间差。根据时间差的大小，返回不同的字符串表示时间的方式。
例如，如果时间差小于30秒，则返回"刚刚"；如果时间差小于1小时，则返回"X分钟前"；如果时间差小于1天，则返回"X小时前"；如果时间差小于2天，则返回"1天前"。如果传入了选项，则调用parseTime方法将时间转换为指定格式的字符串；否则，返回月、日、小时和分钟的字符串表示。
可以根据需要修改time和option的值来获取不同格式的时间字符串。
/**
* @param {number} time
* @param {string} option
* @returns {string}
*/
export function formatTime(time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '刚刚'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'时' +
d.getMinutes() +
'分'
)
}
}
使用示例：
import { formatTime } from '路径/formatTime.js'
const time = new Date() // 获取当前时间
const option = '{y}-{m}-{d} {h}:{i}:{s}' // 设置选项
const result = formatTime(time, option) // 调用方法
console.log(result) // 输出转换后的时间字符串
