javascript 秒をhh:mm:ss形式に変更する
- 作成日 2022.09.22
- 更新日 2022.10.14
- javascript
- javascript

javascriptで、秒をhh:mm:ss形式に変更するサンプルコードを記述してます。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 106.0.5249.103
秒をhh:mm:ss形式に変更
秒をhh:mm:ss形式に変更するには、「localhost」で「YYYY-MM-DDTHH:mm:ss.sssZ」に形式にしてから「slice」で変換に必要な箇所を取得します。
const seconds = 660;
console.log( new Date(seconds * 1000).toISOString() )
// 1970-01-01T00:11:00.000Z
const hms = new Date( seconds * 1000 ).toISOString().slice(11, 19);
console.log(hms);
// 00:11:00
const ms = new Date(seconds * 1000).toISOString().slice(14, 19);
console.log(ms);
// 11:00
関数化すると、以下のようになります。
function changeFomatHms(sec){
return new Date( sec * 1000 ).toISOString().slice(11, 19);
}
function changeFomatMs(sec){
return new Date(sec * 1000).toISOString().slice(14, 19);
}
console.log( changeFomatHms(1) ); // 00:00:01
console.log( changeFomatHms(60) ); // 00:01:00
console.log( changeFomatHms(600) ); // 00:10:00
console.log( changeFomatHms(6600) ); // 01:50:00
console.log( changeFomatHms(30000) ); // 08:20:00
console.log( changeFomatMs(1) ); // 00:01
console.log( changeFomatMs(60) ); // 01:00
console.log( changeFomatMs(600) ); // 10:00
console.log( changeFomatMs(6600) ); // 50:00
console.log( changeFomatMs(30000) ); // 20:00
サンプルコード
以下は、
「変更」ボタンをクリックすると、フォームに入力された秒が「HH:mm:ss」であるかを判定して表示する
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container text-center w-25" style="margin-top:150px">
<h2><span class="badge badge-danger">結果</span></h2>
<input id="txt" type="text" class="form-control" />
<button id="btn" type="button" class="btn mt-1 btn-danger">
変換
</button>
</div>
<script>
const changeFomatHms = (sec) => {
if(!Number.isFinite(sec)) return 0; // 数値でなければ0を返す
if(Number.isInteger(sec)) Math.floor(sec); // 少数であれば切り捨て
return new Date( sec * 1000 ).toISOString().slice(11, 19);
}
const hoge = () => {
document.getElementsByClassName('badge')[0].textContent = changeFomatHms( Number(txt.value) );
}
// クリックイベントを登録
btn.onclick = () => { hoge() };
</script>
</body>
</html>
変換されていることが確認できます。

-
前の記事
Rocky Linux9 nginxをインストールする 2022.09.22
-
次の記事
PostgreSQL 配列に配列を追加する 2022.09.22
コメントを書く