JavaScript カウントダウン 日数を時間表記

Question

カウントダウンタイマーを作成しようとしています。

3日分の72時間からカウントさせようと考えています。

2日10時間10分10秒の表記を
↓
58時間10分10秒の表記

この方法を考えているのですが、
うまく行っていないので
ご教授いただけると幸いです。

どうぞよろしくお願い致します。

Comments

[Lhankor_Mhy]

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

var target=new Date('2020/09/02 17:20:00');
var now=new Date().getTime();
var diff=parseInt((target-now)/1000);
var h=parseInt(diff/(60*60));
var m=parseInt(diff/60)%60;
var s=diff%60;
console.log([h,m,s]);

Answer 2

時間表記

まずは、タイマーで繰り返される内容を数値演算で軽量化する yambejp さんの回答を参考にしてください。

残り時間を配列に取得できれば、reduce() を使って、ゼロパディングしつつ単位をつけることもできます。

分解能が msec の例：

var
  U = ["時間","分",".","秒"], // Unit 単位
  out = [
      72, // 時間
      0,  // 分
      0,  // 秒
      0   // ミリ秒
  ].reduce((a,n,i) => a + (n+'').padStart(i==3?3:2,"0") + U[i],"")
;
console.log( out ); // "72時間00分00.000秒"

CODEPEN CountDown

Answer 3

2日10時間10分10秒の表記を...

現状この表記ができているということは、「日、時間、分、秒」はそれぞれ変数で取得できているということですよね？
だとすれば下記のようにすればいいのではないでしょうか？

const day = 2;
const hour = 10;
const minute = 10;
const second = 10;

const disp = `${(day*24 + hour).toString()}時間${hour.toString()}分${second.toString()}秒`