javascript 秒をhh:mm:ss形式に変更する

作成日 2022.09.22
更新日 2022.10.14
javascript
javascript

javascriptで、秒をhh:mm:ss形式に変更するサンプルコードを記述してます。

1. 環境
2. 秒をhh:mm:ss形式に変更
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

秒を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」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!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>

変換されていることが確認できます。