Vue中的时间转换,把毫秒换算成正常时间
把毫秒转换成日常使用的时间格式
·
一、53200毫秒
只到秒,没有分,没有进位,只要简单的除以1000就可以了
{{Math.round(time0/1000)}}
二、3022222毫秒
进位到分钟,需要除以60,然后把小数点前后部分的数值分开来处理
{{Math.floor(Math.round(time/1000)/60)}}:
{{Math.round(time/1000)%60}}
三、32300432毫秒
进位到了小时,需要把除以60得到的整数部分,再除以60,把得到的数的小数和整数部分分开继续处理
{{Math.floor(Math.floor(Math.round(time2/1000)/60)/24) }}:
{{Math.floor(Math.round(time2/1000)/60)%24 }}:
{{Math.round(time2/1000)%60}}
四、4242323234毫秒
分步除以60、60、24,一共要处理四个数
{{Math.floor(Math.floor(Math.floor(Math.round(time3/1000)/60)/60)/24)}}天
{{Math.floor(Math.floor(Math.round(time3/1000)/60)/60)%24}}时
{{Math.floor(Math.round(time3/1000)/60)%60}}分
{{Math.round(time3/1000)%60}}秒
显示结果:
五、53200毫秒
把第一步的数和第四步的代码结合起来看看,出来的是什么结果
这样显示明显不合适,0的时候就可以不用显示
加个v-show来做下判断,代码就改进成下面这样
给div都加上display: inline-block;改成行内块,让它们能显示在同一行
<div>
<div v-show="time0/1000>86400" style="display: inline-block;">
{{Math.floor(Math.floor(Math.floor(Math.round(time0/1000)/60)/60)/24)}}天
</div>
<div v-show="time0/1000>3600" style="display: inline-block;">
{{Math.floor(Math.floor(Math.round(time0/1000)/60)/60)%24}}时
</div>
<div v-show="time0/1000>60" style="display: inline-block;">
{{Math.floor(Math.round(time0/1000)/60)%60}}分
</div>
{{Math.round(time0/1000)%60}}秒
</div>
显示就正常了
再加个三目运算把个位数的前面都拼接上0
然后代码一下就变得无比的长
<div>
<div v-show="time0/1000>86400" style="display: inline-block;">
{{Math.floor(Math.floor(Math.floor(Math.round(time0/1000)/60)/60)/24)<10?('0'+Math.floor(Math.floor(Math.floor(Math.round(time0/1000)/60)/60)/24)):Math.floor(Math.floor(Math.floor(Math.round(time0/1000)/60)/60)/24)}}天
</div>
<div v-show="time0/1000>3600" style="display: inline-block;">
{{Math.floor(Math.floor(Math.round(time0/1000)/60)/60)%24<10?('0'+Math.floor(Math.floor(Math.round(time0/1000)/60)/60)%24):Math.floor(Math.floor(Math.round(time0/1000)/60)/60)%24}}时
</div>
<div v-show="time0/1000>60" style="display: inline-block;">
{{Math.floor(Math.round(time0/1000)/60)%60<10?('0'+Math.floor(Math.round(time0/1000)/60)%60):Math.floor(Math.round(time0/1000)/60)%60}}分
</div>
{{Math.round(time0/1000)%60<10?('0'+Math.round(time0/1000)%60):Math.round(time0/1000)%60}}秒
</div>
显示效果对比
重点:
%:取余
Math.floor():相当于省去小数后的数字
Math.round():四舍五入
更多推荐
已为社区贡献3条内容
所有评论(0)