javascript HH:MM:SS形式を秒単位に変換する

作成日 2022.09.12
更新日 2022.10.14
javascript
javascript

javascriptで、HH:MM:SS形式を秒単位に変換するサンプルコードを記述してます。

1. 環境
2. 秒単位に変換
3. サンプルコード

環境

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

Javascript サンプル集はこちら

秒単位に変換

秒単位に変換するには、時間と分と秒に分割して、それぞれを秒に変換して演算します。

const str = '10:10:10';

const [hours, minutes, seconds] = str.split(':');

console.log( Number(hours) * 60 * 60 + Number(minutes) * 60 + Number(seconds) );
// 36610

サンプルコード

以下は、テキストフォームに入力した「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 id="result" class="badge badge-info">実行結果</span></h2>

    <input id="txt" type="text" class="form-control" />

    <button id="btn" type="button" class="btn btn-info btn-rounded mt-1">
      実行
    </button>

  </div>

  <script>    

    btn.onclick = () => {

      const [hours, minutes, seconds] = txt.value.split(':');

      result.textContent = Number(hours) * 60 * 60 + Number(minutes) * 60 + Number(seconds);

    }
    
  </script>
</body>

</html>

配列化されて表示できていることが確認できます。