<template>
<div>
<div>
<p>开始时间:{{ state.stm }}</p>
<p>结束时间:{{ state.etm }}</p>
<p>相差(数字格式):{{state.ztime.timeList.join(':')}}</p>
<p>相差(中文格式):{{state.ztime.timeName}}</p>
</div>
</div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
import dayjs from 'dayjs';
/**
* 秒转换时分秒格式
* @param {*} e 分钟数
* @returns
*/
const getMinuteToFormat = (e) =>{
let tname = ''//中文格式
let h = Math.floor(e / (60 * 60))//时
let m = Math.floor((e - (h * 60 *60)) / 60)//分
let s = Math.floor(e % 60)//秒
// 如果是个位数,自动补0
h = h>9 ?h :'0'+h
m = m>9 ?m :'0'+m
s = s>9 ?s :'0'+s
if(h>0){ tname += h + '时' }
if(m>0){ tname += m + '分' }
if(s>0){ tname += s + '秒' }
return {
mTotal: e,//总秒数
timeList: [h, m, s],//['01', '02', '03']
timeName: tname,//01时02分03秒
}
}
const state = reactive({
stm: '2024-08-13 10:00:00',
etm: '2024-08-13 11:00:03',
ztime: {
timeList: [],
timeName: ''
}
})
onMounted(()=>{
// 获取一个时间段的相差毫秒数
const cha = dayjs(state.etm).diff(state.stm) //获取相差毫秒数
state.ztime = getMinuteToFormat(cha/1000)
})
</script>
12-16
2329