JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】秒をHH-MM-SS形式に変換する方法をわかりやすく解説

秒をHH-MM-SS形式に変換するには？

動画の再生時間やタイマー、計測ツールなど、秒数を「時-分-秒（HH-MM-SS）」形式で表示したい場面はよくあります。JavaScriptでは、除算と Math.floor() を組み合わせることで、シンプルな関数でこの変換を実現できます。

変換の基本的な考え方

秒数を時・分・秒に分解する手順は以下の通りです。

  • 時：秒数を3600で割り、小数点以下を切り捨てる
  • 分：1時間未満の残り秒数を60で割り、小数点以下を切り捨てる
  • 秒：時と分に変換した分を差し引いた残りの秒数

さらに、1桁の数値の前に「0」を付けてゼロ埋め（パディング）することで、常に2桁の見やすい表示になります。

サンプルコード

以下は、秒数を受け取ってHH-MM-SS形式の文字列を返す関数の実装例です。

<html>
   <head>
      <title>JavaScript Dates</title>
   </head>
   <body>
      <div id = "newSeconds"></div>
      <script>
         var convertSeconds = function(sec) {
            var hrs = Math.floor(sec / 3600);
            var min = Math.floor((sec - (hrs * 3600)) / 60);
            var seconds = sec - (hrs * 3600) - (min * 60);
            seconds = Math.round(seconds * 100) / 100;

            var result = (hrs < 10 ? "0" + hrs : hrs);
            result += "-" + (min < 10 ? "0" + min : min);
            result += "-" + (seconds < 10 ? "0" + seconds : seconds);
            return result;
         }
         var add_seconds = convertSeconds(100);
         document.getElementById("newSeconds").innerHTML = add_seconds;
      </script>
   </body>
</html>

コードの解説

  • Math.floor(sec / 3600) で時間を算出します。
  • 全体の秒数から時間分の秒数を引き、その結果を60で割って分を求めます。
  • 残りの秒数は、時間と分に相当する秒数を差し引いて計算します。
  • Math.round(seconds * 100) / 100 により、小数第2位まで丸めています。
  • 三項演算子を使い、各値が10未満の場合は先頭に「0」を付けて2桁に揃えています。

実行結果

このコードでは convertSeconds(100) を呼び出しているため、画面には次のように表示されます。

00-01-40

padStart()を使ったより簡潔な書き方

ES2017以降で利用できる String.prototype.padStart() を使うと、ゼロ埋めの処理をさらに簡潔に書けます。

const formatSeconds = (sec) => {
  const hrs = Math.floor(sec / 3600);
  const min = Math.floor((sec % 3600) / 60);
  const seconds = Math.floor(sec % 60);
  return [hrs, min, seconds]
    .map(v => String(v).padStart(2, "0"))
    .join("-");
};

console.log(formatSeconds(100)); // 00-01-40

この方法では、配列と map() を組み合わせることで、各値の2桁ゼロ埋めと「-」での連結をまとめて処理できます。コードの可読性が高まるため、モダンなJavaScript環境ではこちらの書き方がおすすめです。

  1. JavaScriptでオートコンプリート（入力補完）機能を実装する方法

    JavaScriptによるオートコンプリートの実装検索フォームなどでユーザーの入力に合わせて候補を自動的に表示する「オートコンプリート（入力補完）」機能は、JavaScriptを使えばライブラリなしでも実装できます。本記事では、配列に格納されたデータを候補として表示し、マウスクリックやキーボード操作で選択できるオートコンプリートの作り方を、完全なサンプルコードとともに解説します。実装のポイントこのサンプルでは以下のような仕組みでオートコンプリートを実現しています。inputイベント：テキストフィールドに入力があるたびに発火し、入力値と前方一致する項目を候補リストとして動的に生成します。キーボー

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>