一、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()：四舍五入?

總結

以上是生活随笔為你收集整理的Vue中的时间转换，把毫秒换算成正常时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。