開いてから30分カウントダウンを開始するページを作りたい

前提・実現したいこと

ページを開いてから30分カウントダウンする装置を作りたいと思っています。
使えそうなページを見つけて参考にしたいと思っているのですが、このコード自体が
どこで何時間の設定でカウントしているのかがわからないです。

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>5-01_countdown</title>
6</head>
7<body>
8    <h1>カウントダウンタイマー</h1>
9    <h2>1秒ごとに再計算する</h2>
10    <p>今から<span id="timer"></span>以内に注文すると50%オフ！</p>
11    <script>
12        var countdown = function (due) {
13            var now = new Date();
14
15            var rest = due.getTime() - now.getTime();
16            var sec = Math.floor(rest / 1000 % 60);
17            var min = Math.floor(rest / 1000 / 60) % 60;
18            var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
19            var days = Math.floor(rest / 1000 / 60 / 60 / 24);
20            var count = [days, hours, min, sec];
21
22            return count;
23        }
24
25        var goal = new Date();
26        goal.setHours(23);
27        goal.setMinutes(59);
28        goal.setSeconds(59);
29
30        var recalc = function () {
31            var counter = countdown(goal);
32            var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
33            document.getElementById('timer').textContent = time;
34            refresh();
35        }
36
37        var refresh = function () {
38            setTimeout(recalc, 1000);
39        }
40
41        recalc(); // 再計算
42    </script>
43</body>
44</html>

試したこと

var goal = new Date();で残り時間を計算しているのではないかなと思っています。
30分をカウントダウンしたいため時間がいらないのでcounter[1] + '時間' + はいらないということはわかっています。

補足情報（FW/ツールのバージョンなど）

こちらのサイトを参考にしました。
http://jsstudy.hatenablog.com/entry/javascript-primer-5-1-timer
まだ初心者で勉強中のためすごく初歩的な質問をしているかもしれずすみません。
少しでも何かヒントになるような回答を頂けましたら幸いです。
よろしくお願いします。

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

回答2件

ベストアンサー

var goal = new Date();

    goal.setHours(23);
    goal.setMinutes(59);
    goal.setSeconds(59);

ここで「本日の23時59分59秒」を設定して「ゴール」（要はカウントダウンで0となる時間ですね）としています。
その後、setTimeout()で1秒毎にrecalc()を実行し、「recalc()を実行した時間（正確にはrecalc()から呼び出されたcountdown()を実行した時間）」を取得したうえで、「ゴールまでの時間」を引いて、その時間を表示しています。

つまり、「ページを開いてから30分カウントダウンする装置」を作りたいのであれば
「画面を開いてから30分後」を今回で言う「ゴール」とすれば良いということになります。

投稿2019/07/12 03:25

編集2019/07/12 03:26

m.ts10806

総合スコア80850

kana0701

2019/07/12 06:14 編集

ご回答ありがとうございます！ var goal = new Date(); goal.setMinutes(29); goal.setSeconds(59); としてみたのですが動作せず、これでは間違っているのでしょうか？

m.ts10806

2019/07/12 06:19

その内容では単に現在時刻の分を29にして秒を59と固定にしただけで「今から30分後」にしたわけではありません。「+30分」と考えてください。「JavaScript 時間足し算」とかで調べると良いと思います。

kana0701

2019/07/12 06:29

お返事ありがとうございます！検索の仕方を教えていただいたおかげて自分でできました！まだまだ勉強中ですので頑張りたいと思います！とても助かりました、ありがとうございます！

m.ts10806

2019/07/12 06:37

解決できたようで何よりです。このあたりは「ロジック」といって「実現するための道筋を適切に組み立てることができるか」という部分にもなってきます。参考した先はゴールが「時間」でしたが、今回は「タイマー」ということだけに着目すると「30分から1秒ずつ引く」というやり方でも実現は可能です。その方向からもやり方を考えてみてください。ある目的を達成するための手段は1つとは限りません。特にプログラミングは幾つも手段が考えられます。

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