用 Day.js 把秒數轉換為時間

/

本篇要解決的問題

這幾天遇到「API 回來給的是秒數,但在頁面呈現時要秀出的是 時、分、秒 」的需求,偷懶直接用 Day.js 的套件後,發現照著文件去寫卻換算不出來 = =,傻眼,後來是在 Google 大神的幫助下才找到寫法。

因為程式碼很短,本篇就是一個說明後,然後直接用 Tailwind CSS 做出一個 Demo 頁給大家試試囉。

本篇參考文件:

Day.js Loading plugin in the browser

Day.js Durations Format

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 的格式文件上有這些:

格式輸出說明
Y18
YY18年,2 位數
YYYY2022年,4 位數
M1-12月,從 1 開始
MM01-12月,2 位數
D1-31
DD01-31日,2 位數
H0-23
HH00-23時,2 位數
m0-59
mm00-59分,2 位數
s0-59
ss00-59秒,2 位數
SSS000-999毫秒,3 位數
format 的可用格式

範例

August 製作了一個範例,放在 CodePen 上,輸入要轉換的秒數後,按下「轉換」就可以看見結果:

https://codepen.io/letswrite/full/YzrXKLP

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

隨選筆記文

Google Maps

Google Maps API 學習筆記 – 6:畫新冠肺炎分佈圖

Bot LINE

LINE Notify:用 Google Apps Script 建立簡易網站監測機器人

Analytics Google

GA 自訂維度的應用 分類之下的文章成效

Google Maps

Google Maps API 學習筆記 – 3:用熱圖 / Heat map 製作全台 12 小時雨量分佈圖

WordPress

WordPress:Site Kit by Google 介紹及使用

WordPress

如何用 MAMP 在本機安裝 WordPress

Firebase Google

用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

Front-End

用原生 JS 做一個簡單的手風琴 Accordion / Collapse 功能

Vue

用 Storybook 做一個 UI 整理集

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。