カウントダウンタイマーがうまく作動しない

Question

前提・実現したいこと

以下のようなカウントダウンタイマーを作成しています。
・ページを読み込んでから1時間30分を計測
・残り時間を表示し続ける　※残り時間が1時間以上でも分表示
・終了後、Time is Up！と表示

正確に表示させるにはどうしたらいいのでしょうか。

発生している問題・エラーメッセージ

ページを読み込むと制限時間：NaN分NaN秒と表示されてしまいます。

該当のソースコード

制限時間：<span id="remaining_time"></span>
<script>
    const now = new Date();

    var finish = new Date();
    finish.setMinutes(now.setHours( now.getMinutes() + 90 ));
    finish.setSeconds(now.setHours( now.getSeconds() ));

    var replay = function () {
        var remaining_time = finish.getTime() - now.getTime();
        
        var remaining_time_minutes = remaining_time / 1000 / 60;
        var remaining_time_seconds = remaining_time - remaining_time_minutes ;
        
        if(remaining_time < 1){
            var time = 'Time is Up！';
            document.getElementById('remaining_time').textContent = time;
        }else{
            var time = remaining_time_minutes + '分' + remaining_time_seconds + '秒';
            document.getElementById('remaining_time').textContent = time;
        }
        
    }

    var refresh = function () {
        setTimeout(replay, 1000);
    }

    replay();
</script>

Comments

[m.ts10806]

フィードバックください。
https://teratail.com/help/question-tips#questionTips4-2
私はデバッグ方法がメインの回答なのでそれだけで解決するものではないです（もちろんデバッグが有効に使えるようになったことが成果ならそれはそれで良いのですが、どう解決したのかコメントは欲しい）

Answer 1

replay()冒頭で確かめてみると分かりますが、

    var replay = function () {
        console.log(now);
        console.log(finish);

finishのほうがInvalid Dateになっています。

ちなみに遡るとこのようになっています。

    var finish = new Date();
    console.log(finish); //Date Sat Jun 19 2021・・・
    finish.setMinutes(now.setHours( now.getMinutes() + 90 ));
    console.log(finish); //Invalid Date

setMinutesした時点ですね。

「90分後」としたいのでしたら、90 * 60 * 1000をTimeに足してからnew Date()したら良さそうです。

    var addition_time = 90 * 60 * 1000;
    var finish = new Date(now.getTime()+addition_time);

これで動かしてみて結果を見た感じだと、
もしかしたらremaining_time_secondsの計算も調整する必要がありそうです。

Comments

[Ito_Kazuki_]

ご報告が遅れました。
さまざまなご意見を総合し、また、カスタマイズして以下のようになりました。

<span id="remainingtime">Time Loading...</span><br>

<script>
const now = new Date();
var addition_time_hour = 1 //時間
var addition_time_min = 30 //分
var addition_time_sec = 0 //秒
var addition_time = (addition_time_hour * 60 * 60 + addition_time_min * 60 + addition_time_sec )* 1000 ;//制限時間の指定

if(addition_time_sec < 10){
addition_time_sec = '0' + addition_time_sec
}else if(addition_time_sec = 0){
addition_time_sec = '00'
}

addition_time_min = addition_time_min + addition_time_hour * 60

var finish = new Date(now.getTime()+addition_time);

var replay = function () {
var remainingtime_ms = finish.getTime() - new Date();//残り時間[ms]
var remainingtime_sec = remainingtime_ms / 1000;
var remainingtime_Time_min = Math.floor(remainingtime_sec /60);
var remainingtime_Time_sec = Math.floor(remainingtime_sec - remainingtime_Time_min * 60);

if(remainingtime_Time_sec < 10){
remainingtime_Time_sec = '0' + remainingtime_Time_sec
}

var remainingtime_overtime_ms = new Date() - finish.getTime();
var remainingtime_overtime_sec = remainingtime_overtime_ms / 1000;
var remainingtime_overtime_Time_min = Math.floor(remainingtime_overtime_sec / 60 );
var remainingtime_overtime_Time_sec = Math.floor(remainingtime_overtime_sec - remainingtime_overtime_Time_min * 60);

if(remainingtime_overtime_Time_sec < 10){
remainingtime_overtime_Time_sec = '0' + remainingtime_overtime_Time_sec
}

if(remainingtime_ms < 1){
var time = '制限時間になりました。（制限時間'+ addition_time_min + '分' + addition_time_sec + '秒から' + remainingtime_overtime_Time_min + '分' + remainingtime_overtime_Time_sec +'秒経過）';
document.getElementById('remainingtime').textContent = time;
}else{
var time = '残り時間　' + remainingtime_Time_min + '：' + remainingtime_Time_sec ;
document.getElementById('remainingtime').textContent = time;
}

}

setInterval(replay, 100);
</script>

[m.ts10806]

了解です。
コメント欄ではマークダウン使えないので、回答として投稿されたほうが良いと思います。そのほうが後から見た人も参考にしやすいです。

Answer 2

setHours()の戻り値は、UNIX時間ですよ。

やりたいことはこういうことですか？

    var finish = new Date();
    finish.setMinutes(now.getMinutes() + 90 );

Comments

[m.ts10806]

timeに足す回答しましたが、㎡inutesに90足した方が早かったですね。

[Lhankor_Mhy]

もしかして、実装依存のふるまいですかね？
ちゃんと調べずに回答してしまいました。

[m.ts10806]

それっぽい感じには出ますが、それが要件満たすかどうかは別の話ですね。
ただ、やはり時間関係はmoment.jsを使った方が良さそうです。。

Answer 3

finish.setMinutes(now.setHours( now.getMinutes() + 90 ));
finish.setSeconds(now.setHours( now.getSeconds() ));

の部分で、不正なDateオブジェクトが生成されてしまっているからです。
setMinutesとsetSecondsには0～59、setHoursには0～23の値を渡さなくてはなりません。
（参考：MDN - Date.prototype.setHours()、MDN - Date.prototype.setMinutes()、MDN - Date.prototype.setSeconds()）

今回は90分後、つまり5400000ミリ秒後の時間に変更すればよいので、

var finish = new Date();
finish.setTime(finish.getTime() + 5400000);

var replay = function () {
  var remaining_time = finish.getTime() - new Date();
  var remaining_time_minutes = remaining_time / 1000 / 60;
  var remaining_time_seconds = remaining_time / 1000 - remaining_time_minutes * 60;
  （後略）

と変更すればよいでしょう。
（ついでにremaining_time_secondsの計算も修正してあります）

ここまでで、時間が正しく表示されるようにはなりました。（小数点以下を切り捨てたり、切り上げたりはした方が良さそうですが）
まだカウントダウンはされないので、それはこれからの課題になります。

Answer 4

ご報告が遅れました。
さまざまなご意見を総合し、また、カスタマイズして以下のようになりました。

<span id="remainingtime">Time Loading...</span><br>

<script>
const now = new Date();
var addition_time_hour = 1 //時間
var addition_time_min = 30 //分
var addition_time_sec = 0 //秒
var addition_time = (addition_time_hour * 60 * 60 + addition_time_min * 60 + addition_time_sec )* 1000 ;//制限時間の指定

if(addition_time_sec < 10){
addition_time_sec = '0' + addition_time_sec
}else if(addition_time_sec = 0){
addition_time_sec = '00'
}

addition_time_min = addition_time_min + addition_time_hour * 60

var finish = new Date(now.getTime()+addition_time);

var replay = function () {
var remainingtime_ms = finish.getTime() - new Date();//残り時間[ms]
var remainingtime_sec = remainingtime_ms / 1000;
var remainingtime_Time_min = Math.floor(remainingtime_sec /60);
var remainingtime_Time_sec = Math.floor(remainingtime_sec - remainingtime_Time_min * 60);

if(remainingtime_Time_sec < 10){
remainingtime_Time_sec = '0' + remainingtime_Time_sec
}

var remainingtime_overtime_ms = new Date() - finish.getTime();
var remainingtime_overtime_sec = remainingtime_overtime_ms / 1000;
var remainingtime_overtime_Time_min = Math.floor(remainingtime_overtime_sec / 60 );
var remainingtime_overtime_Time_sec = Math.floor(remainingtime_overtime_sec - remainingtime_overtime_Time_min * 60);

if(remainingtime_overtime_Time_sec < 10){
remainingtime_overtime_Time_sec = '0' + remainingtime_overtime_Time_sec
}

if(remainingtime_ms < 1){
var time = '制限時間になりました。（制限時間'+ addition_time_min + '分' + addition_time_sec + '秒から' + remainingtime_overtime_Time_min + '分' + remainingtime_overtime_Time_sec +'秒経過）';
document.getElementById('remainingtime').textContent = time;
}else{
var time = '残り時間　' + remainingtime_Time_min + '：' + remainingtime_Time_sec ;
document.getElementById('remainingtime').textContent = time;
}

}

setInterval(replay, 100);
</script>