javascriptのカウントダウンタイマーの記述について質問です。

Question

下記のカウントダウンタイマーのscriptで質問したいことがあります。
endDateTimeのDateを常に当日の22:00にする場合、どのように記述すればよいでしょうか。

また、下記のscriptは指定の時刻を過ぎてもカウントダウンが終了しないようになっているのですが、時刻を過ぎたら'終了'というテキストを表示させたいです。

どなたかご教示いただけますと幸いです

<script type="text/javascript">
$(function() {
countDown();
});
function countDown() {
var startDateTime = new Date();
var endDateTime = new Date("January 01,2014 22:00:00");
var left = endDateTime - startDateTime;
var a_day = 24 * 60 * 60 * 1000;

// 期限から現在までの『残時間の日の部分』
var d = Math.floor(left / a_day) 

// 期限から現在までの『残時間の時間の部分』
var h = Math.floor((left % a_day) / (60 * 60 * 1000)) 

// 残時間を秒で割って残分数を出す。
// 残分数を60で割ることで、残時間の「時」の余りとして、『残時間の分の部分』を出す
var m = Math.floor((left % a_day) / (60 * 1000)) % 60 

// 残時間をミリ秒で割って、残秒数を出す。
// 残秒数を60で割った余りとして、「秒」の余りとしての残「ミリ秒」を出す。
// 更にそれを60で割った余りとして、「分」で割った余りとしての『残時間の秒の部分』を出す
var s = Math.floor((left % a_day) / 1000) % 60 % 60 

$("#TimeLeft").text(d + '日' + h + '時間' + m + '分' + s + '秒');
setTimeout('countDown()', 1000);
}
</script>

<div class="Timer">
<p>カウントダウン終了まで</p>
<div id="TimeLeft"></div>
</div>

Answer 1

Date.prototype.setHours

Date.prototype.setHours を使ってみてはどうでしょうか。

• Date.prototype.setHours() - JavaScript | MDN
• window.setTimeout - Web API インターフェイス | MDN
• 22:00までカウントダウン - JSFiddle

<div class="Timer">
  <p>カウントダウン終了まで</p>
  <div id="TimeLeft"></div>
</div>
<script>
'use strict';
setTimeout(function countdown (element) {
  var endTime = new Date,
      now = new Date,
      floor = Math.floor,
      diffTime;

  endTime.setHours(22, 0, 0);
  diffTime = endTime - now;

  if (diffTime > 0) {
    element.textContent = floor(diffTime / 3600000) + '時間' + floor((diffTime % 3600000) / 60000) + '分' + floor((diffTime % 60000) / 1000) + '秒';
    console.log(now);
    console.log(element.textContent);
    setTimeout(countdown, 1000, element);
  } else {
    element.textContent = '終了';
  }
}, 1000, document.getElementById('TimeLeft'));
</script>

22:00 を過ぎたら終了

時刻を過ぎたら'終了'というテキストを表示させたいです。

こちらはタイマー起動時の判定処理で考え方が2通りあります。

• 23:00にタイマーを始動した場合、既に22:00を過ぎているので「終了」を出力する
• 23:00にタイマーを始動した場合、翌日の22:00はまだ過ぎてないので翌日の22:00を目指してカウントダウンを開始する

私が書いたコードは前者です。

Re: jkita1456 さん

Comments

[kei344]

getHours でも実装出来ますが、例文で提示されているのは setHoursでは？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/setHours

[think49]

To: kei344 さん
ご指摘ありがとうございます。
仰る通りでしたので修正しました。「穴があったら入りたい」とはこの事ですね…。
'終了' の出力条件も甘かったのでコードも修正しておきました。

Answer 2

Dateを常に当日の22:00にする場合

startDateTimeに現在時刻の通算ミリ秒が入るので、これを【今日のhh時】にしたい場合のシンプルな方法では1日の通算ミリ秒(86400000)で丸めてからhh時刻までのミリ秒(hh x 360000)を足すという計算をしてあげます

var endDateTime = Math.floor(startDateTime/86400000)*86400000+(22*360000)

時刻を過ぎたら'終了'というテキストを表示

leftに時刻の比較結果が入っているので「過ぎていればメッセージ表示して終了する」という処理を入れてあげます

・・・
if( left < 0 ){ // ぴったりの時刻を含めたければ <= にする
 //終了メッセージ表示
 return;
}
setTimeout('countDown()', 1000);

Answer 3

$("#TimeLeft").text(d + '日' + h + '時間' + m + '分' + s + '秒');

の前に if で left が正の数である事を確認して場合分けするとよいと思います。