質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.55%

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

受付中

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,961

jkita1456

score 8

下記のカウントダウンタイマーの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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/11/02 10:59

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

+1

 Date.prototype.setHours

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

<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 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/02 13:21

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

    キャンセル

  • 2016/11/02 14:06

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る