カウントダウンタイマー

###前提・実現したいこと
カウントダウンタイマーのｊｓを実装しています。
残り時間の日数を『あと○時間△分□秒』という具合にすべて時間で表示させたいのですが記述方法を教えてください。

###該当のソースコード

行動規範の内容に同意します

回答1件

ベストアンサー

残り日数ではなく、すべて時間で表示することが希望とのことでしたので、なるべくシンプルに記述をしたサンプルを作りました。

また、該当のソースコードは希望の出力形式とは異なっています。ですので、該当のソースコードとして掲載するのには不適切かと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5</head>
6<body>
7  <div id="timer"></div>
8
9  <script type="text/javascript">
10    'use strict';
11
12    var timer = document.getElementById('timer');
13
14    // 終了日時を指定
15    var endDate = new Date('2017-08-20T10:10:00+09:00');
16
17    var countDown = function() {
18      var nowDate = new Date();
19
20      // 現在から終了日時を引いた残り時間を ms で取得
21      var ms = endDate - nowDate;
22
23      // ms を時間に戻す
24      var h = String(Math.floor(ms / 3600000));
25      var m = String(Math.floor((ms - h * 3600000) / 60000));
26      var s = String(Math.round((ms - h * 3600000 - m * 60000) / 1000));
27
28      if (nowDate < endDate) {
29        timer.innerHTML = 'あと' + h + '時間' + m + '分' + s + '秒';
30        setTimeout(countDown, 1000);
31      } else {
32        timer.innerHTML = '終了しました';
33      }
34    }
35
36    countDown();
37  </script>
38</body>
39</html>

投稿2017/08/05 09:47

編集2017/08/05 10:33

syuus

総合スコア403

niimme

2017/08/05 14:31

丁寧なご対応ありがとうございました！出来ればミリ秒まで表示したいのですが、その場合の追加コードをお教えいただければありがたいです。よろしくお願いいたします。

syuus

2017/08/05 15:55 編集

var s = String(Math.round((ms - h * 3600000 - m * 60000) / 1000)); の部分で、時間hと分mを差し引いたミリ秒を1000で割ることで1秒単位の数値を算出しています。ということは、すでに表示したいミリ秒の数値は出ているようなものなので、そのあとの処理にミリ秒のままの数値を出力するようにしてあげればミリ秒を表示できます。それと、setTimeout(countDown, 1000);の部分も変更が必要です。1000ミリ秒(1秒)に1回実行するという意味なので、10にすると10ミリ秒に1回実行するということになります。この2つのコードを追加・変更するとミリ秒を表示できるかと思います。

niimme

2017/08/08 15:29

親切にご享受頂きましてありがとうございました！無事解決することができました！！

行動規範の内容に同意します