本篇大綱
本篇要解決的問題
這幾天遇到「API 回來給的是秒數,但在頁面呈現時要秀出的是 時、分、秒 」的需求,偷懶直接用 Day.js 的套件後,發現照著文件去寫卻換算不出來 = =,傻眼,後來是在 Google 大神的幫助下才找到寫法。
因為程式碼很短,本篇就是一個說明後,然後直接用 Tailwind CSS 做出一個 Demo 頁給大家試試囉。
本篇參考文件:
Day.js Loading plugin in the browser
GitHub Issue Feature request: Add Duration Plugin
將秒數轉換為時間程式碼
Day.js 的原文件是寫在 Durations Format 當中,如下:
dayjs.duration({ seconds: 1, minutes: 2, hours: 3, days: 4, months: 6, years: 7 }).format('YYYY-MM-DDTHH:mm:ss') // 0007-06-04T03:02:01
因為在實作時只會給秒數,所以 Format 出來後像其它的「年、月、日、時、分」沒給的話就都是 undefined
,後來是在 GitHub Issue 上看到有神人給的範例後,才知道不是這麼寫。
應該寫成如下:
這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝
dayjs.duration({秒數}, "seconds").format('Y年 M月 D日 H時 m分 ss秒');
{秒數}
替換成要計算的實際秒數即可。
"secondes"
的部份,也可以替換成其它單位:
seconds、minutes、hours、days、months、years
format
的格式文件上有這些:
格式 | 輸出 | 說明 |
---|---|---|
Y | 18 | 年 |
YY | 18 | 年,2 位數 |
YYYY | 2022 | 年,4 位數 |
M | 1-12 | 月,從 1 開始 |
MM | 01-12 | 月,2 位數 |
D | 1-31 | 日 |
DD | 01-31 | 日,2 位數 |
H | 0-23 | 時 |
HH | 00-23 | 時,2 位數 |
m | 0-59 | 分 |
mm | 00-59 | 分,2 位數 |
s | 0-59 | 秒 |
ss | 00-59 | 秒,2 位數 |
SSS | 000-999 | 毫秒,3 位數 |
範例
August 製作了一個範例,放在 CodePen 上,輸入要轉換的秒數後,按下「轉換」就可以看見結果:
https://codepen.io/letswrite/full/YzrXKLP
Summary

Article Name
用 Day.js 把秒數轉換為時間
Description
本篇大綱:本篇要解決的問題。將秒數轉換為時間程式碼。範例。遇到「API 回來給的是秒數,但在頁面呈現時要秀出的是 時、分、秒 」的需求,本篇就是程式碼說明後,最後直接用 Tailwind CSS 做出一個 Demo 頁給大家試試。
Augustus
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

以下是留言,但關於留言的部份必需先讓你們知道:
本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,
Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外,公開信箱是為了讓金流驗證用,
因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。
因此決定不再回覆信件,有疑問就利用留言功能囉。