【javascript】秒のみの数値を「xx日xx時間xx分xx秒」に変換する方法

「睡眠時間を確保する女の子」

今回は、時間の「秒」として設定された数値を「xx日xx時間xx分xx秒」のように日常的に見慣れている単位に置き換える方法について、解説していきます。

使用するケース

サーバー側から秒数で送られてきた時間を、見やすいようにクライアント側で変更する場合であったり、カウントダウンタイマーを設置したりする場合に使われます。

方法

下記、参考用のjavascriptのコードとなります。

    var num = 100000;
    var timeD = Math.floor(num / (24 * 60 * 60));
    var timeH = Math.floor(num % (24 * 60 * 60) / (60 * 60));
    var timeM = Math.floor(num % (24 * 60 * 60) % (60 * 60) / 60);
    var timeS = num % (24 * 60 * 60) % (60 * 60) % 60;
    var timeDMS = timeD + '日' + timeH + '時間' + timeM + '分' + timeS + '秒';

    console.log(timeDMS);

この記述により、コンソールには
1日3時間46分40秒
と表示されます。

コード説明

var num = 100000;
では、変換元の秒の数値を変数「num」に入れています。

var timeD = Math.floor(num / (24 * 60 * 60));
では、「日」として表示する値を変数「timeD」に入れています。

1日を「秒」に変換すると「24 * 60 * 60」の値になります。
※わかりやすいように敢えて計算はしていません。

そして「num」を「24 * 60 * 60」で割り、更に「Math.floor(~)」のメソッドを使用して小数点を削除することで、「日」として表示する値が求められます。

var timeH = Math.floor(num % (24 * 60 * 60) / (60 * 60));
では、「時間」として表示する値を変数「timeH」に入れています。

まず「%」ですが、「A % B」では、AをBで割った余りの数値が求められます。

つまり「num % (24 * 60 * 60)」では、変換元の「num」から、日数で割った余りの数値が求められることとなり、この余りの数値から、1時間あたりの秒数「60*60」を割り、「Math.floor(~)」を使用して小数点を削除することで、「時間」として表示する値が求められます。

var timeM = Math.floor(num % (24 * 60 * 60) % (60 * 60) / 60);
では、「分」として表示する値を変数「timeM」に入れています。

変換元の「num」から日数で割った余りから更に時間で割った余りの値を60で割り、「Math.floor(~)」を使用して小数点を削除することで、「分」として表示する値が求められます。

var timeS = num % (24 * 60 * 60) % (60 * 60) % 60;
では、「秒」として表示する値を変数「timeS」に入れています。

変換元の「num」から日数で割った余りから更に時間で割った余りの値を更に分で割った余りの値となります。

なお、この値は必ず整数なので、「Math.floor(~)」は必要ありません。

var timeDMS = timeD + '日’ + timeH + '時間’ + timeM + '分’ + timeS + '秒’;
では、「timeDMS」という変数に、これまで求めてきたそれぞれの単位ごとの数値を表示する内容を入れています。

「timeDMS」を呼び出すことで、秒のみの時間が、日常的に見慣れている単位に変換されて表示されます。

何か所も同様の対応をする場合は、下記のように関数にしてしまった方がいいでしょう。

 function makeTime(num) {
      var timeD =Math.floor(num / (24 * 60 * 60));
      var timeH =Math.floor(num % (24 * 60 * 60) / (60 * 60));
      var timeM =Math.floor(num % (24 * 60 * 60) % (60 * 60) / 60);
      var timeS =num % (24 * 60 * 60) % (60 * 60) % 60;
      var timeDMS = timeD + '日' + timeH + '時間' + timeM + '分' + timeS + '秒';
      return timeDMS;
    }
console.log(makeTime(100000));

関数化したことで、
maketime()
の引数に数値を入れることで同様の変換ができ、様々な箇所で使用できます。

以上となります。