JavaScript - 画面表示から6時間のカウントダウンタイマーを作りたい

Question

調べながら下記コードまでは作ることができたのですが、
「画面を表示してから6時間後」というのが出来ずに悩んでいます...

'use strict';
var interval = 1000;

function countdownTimer(){
  var endDate = new Date();
  var nowDate = new Date();
  endDate.setHours(6, 0, 0);
  var period = endDate - nowDate ;
  var addZero = function(n){return('0'+n).slice(-2);}

  if(period >= 0) {
  var hour = Math.floor(period / (1000 * 60 * 60));
  period -= (hour *(1000 * 60 * 60));
  var minutes =  Math.floor(period / (1000 * 60));
  period -= (minutes * (1000 * 60));
  var second = Math.floor(period / 1000);
  var insert = "";
  insert += '<span class="h">' + hour + ':' + '</span>';
  insert +=  '<span class="m">' + addZero(minutes) +':' + '</span>';
  insert += '<span class="s">' + addZero(second) + '</span>';
  document.getElementById('sample').innerHTML = insert;
  setTimeout(countdownTimer,1000);
  }
  else {
    var insert = "";
    var text = "終了";
    insert += '<span>' + text + '</span>';
    document.getElementById('sample').innerHTML = insert;
  }
}
countdownTimer();

今のままだと、本日6時までのカウントダウンになってしまいます。

JavaScriptはまだまだ勉強中で、何か間違いがあればご指摘いただけると幸いです。

主に、下記ページを参考にしました。
https://qiita.com/piesuke0727/items/91333b9a1ba8fe051be2

よろしくお願いいたします。

Comments

[m.ts10806]

「今から何時間後」の計算であればどこにいってもありそうに思います。
むしろ、６時間を秒換算にして普通にカウントダウンすれば良いのでは？

[zushi2]

ご回答ありがとうございます。
できればこのコードを使って実装したいのですが、秒換算しても使えるでしょうか？説明が足りずすみません。

[yutampp]

＞できればこのコードを使って実装したい
その考え捨てよ？
setTimeout(六時間後実行したいこと, 1000*60*60*6);
の１行で済むことを、なぜこのコードを使いたいの？

[otak-lab]

まずはコピー＆ペーストした1行1行の意味を理解した方がよろしいかと。それぞれの変数には何が格納されているか、その行を実行するとどうなるか、わかっていないだけです。

[zushi2]

ご意見ありがとうございます。
もう一度見直してみます。

Answer 1

今のままだと、本日6時までのカウントダウンになってしまいます。

原因は、endDate.setHours(6, 0, 0); です（MDN setHours()）。

参考にされたサイトに立ち返って、コードを再確認してください。
endDate を オリンピック開催日に指定したサンプルでしたが、
これを画面を開いて6時間後にするだけです。

• MDN getTime()
• 6時間後は 6 * 60 * 60 * 1000 [msec]

が参考になると思います。

---

var endDate = new Date(); で取得した現在時間を.getTime() でミリ秒にして６時間を足す、という認識であっていますでしょうか？(コメントより)

合っています。

記述の仕方が間違っているのでしょうか？(コメントより)

countdownTimer() は setTimeout() で何度も呼ばれます。

参考にされたページ を模写しなおしてください。 endDate の宣言は関数の外で行われているはずです。

Comments

[zushi2]

ご回答いただきありがとうございます。
とても参考になります。
「画面を開いて６時間後」にするということは、
var endDate = new Date(); で取得した現在時間を.getTime() でミリ秒にして６時間を足す、という認識であっていますでしょうか？
以下のようにコードを直したのですがうまく動きません...
ご意見いただけると幸いです。

------------------------------------------------------
'use strict';
var interval = 1000;

function countdownTimer(){
var nowDate = new Date();
var endDate = new Date();
var afterHour = endDate.getTime();
var endTime = afterHour + (6 * 60 * 60 * 1000);
var period = endTime - nowDate ;

var addZero = function(n){return('0'+n).slice(-2);}

if(period >= 0) {
var hour = Math.floor(period / (1000 * 60 * 60));
period -= (hour *(1000 * 60 * 60));
var minutes = Math.floor(period / (1000 * 60));
period -= (minutes * (1000 * 60));
var second = Math.floor(period / 1000);
var insert = "";
insert += '<span class="h">' + hour + ':' + '</span>';
insert += '<span class="m">' + addZero(minutes) +':' + '</span>';
insert += '<span class="s">' + addZero(second) + '</span>';
document.getElementById('sample').innerHTML = insert;
setTimeout(countdownTimer,1000);
}
else {
var insert = "";
var text = "終了";
insert += '<span class="font-small">' + text + '</span>';
document.getElementById('sample').innerHTML = insert;
}
}
countdownTimer();
------------------------------------------------------

よろしくお願いいたします。

[otak-lab]

new Date(endDate.getTime()に6時間加算した値)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

[zushi2]

ご回答ありがとうございます。
理解はできたのですが、その通りに書いてタイマーがうまく動きません...
記述の仕方が間違っているのでしょうか？
下記のように修正したのですが...

var endDate = new Date();
var endDateAfter = new Date(endDate.getTime() + (6 * 60 * 60 * 1000));
var period = endDateAfter - nowDate ;

[otak-lab]

nowDateに現在の日時を格納する。
endDateに現在の日時を格納する。
endDateAfterにendDateから6時間後の日時を格納する。
periodにendDateAfterからnowDateを減算した値を格納する。
periodは？6時間です。(21600000 = 6 * 60 * 60 * 1000)
何度繰り返しても変わりません。
参考にしたコードのendDateはどの位置にありますか？
なぜそこにあるんでしょうか？

[AkitoshiManabe]

> 参考にしたコードのendDateはどの位置にありますか？
「宣言」です。var interval = 1000;の直前に決まっています。

[zushi2]

すみません、初歩的なところで間違えていました...
やっとタイマーを正常に動かすことができました。
otak-labさん、AkitoshiManabeさん
本当にありがとうございましたmm

Answer 2

まず6時間後の日時を変数にとっておき
適当なタイミングのインターバルでカレントの時間を入手し
その差をとれば、カウントダウンできます

Comments

[zushi2]

ご回答ありがとうございます。
試してみます。