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

2022-01-12

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

今回は、時間の「秒」として設定された数値を「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()
の引数に数値を入れることで同様の変換ができ、様々な箇所で使用できます。

追記：数値が1桁のときに10の位に「0」をつけて表示させる方法

上記のコードだと、各数値が1桁だったときに「1日2時間3分4秒」といった表示になりますが、場合によっては「01日02時間03分04秒」というように表示したい場合があるかと思いますので、その方法についても記載しておきます。

まず、下記のような関数を作成します。

function addZero(x){
	if(x < 10){
		return '0' + x;
	}else{
		return x;
	}
}

これは、「addZero(x)」の「x」に数値を入れた場合、その数値が10未満であれば前に「0」をつけて返すという関数です。

これを使用して、一つ前に説明したコードに下記の通り手を加えます。

 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 = addZero(timeD) + '日' + addZero(timeH) + '時間' + addZero(timeM) + '分' + addZero(timeS) + '秒';
      return timeDMS;
    }
console.log(makeTime(100000));

表示させるtimeD～timeSの変数を、addZeroの関数に入れることで、それぞれの変数が10未満であれば頭に0がついて表示されます。

上記の場合は
01日03時間46分40秒
という表示になります。

以上となります。

javascript,Web制作