こんなものを作ってみました。
これを作る上で学んだことを書いていきます！
1 コードについて
① カウントダウンタイマーの大枠を作る
ここではカウントダウンタイマーの箱のようなものを作ります。
いわば公式を作るようなイメージ。
端的に言えば、
未来の時間から現在の時間を引き算して、残り時間を求める。
単位はミリ秒（１秒＝1000ミリ秒）
↓
そこから「秒」「分」「時」「日」を計算する。
↓
最後にそれぞれを配列に保存する。
このような手順で箱を作っていきます。
まず、残り時間の計算です。計算式はシンプルです。
（未来の時間） ー （現在の時間）で残り時間を求めます。
ここでは、dueというパラメータを使っていますが、あまり気にしなくてもかまいません。
後に、goalという定数に置き換わります。
const now = new Date();
const rest = due.getTime() - now.getTime();ここで少し計算をしていきます。
例えば、1,000,000ミリ秒から「秒」「分」を求めるなら、次の計算をします。
１秒＝1000ミリ秒なので 1,000,000ミリ秒 ÷ 1000ミリ秒 = 1000秒
１分＝60秒なので 1000秒 ÷ 60秒 = 16.666・・・分
このような計算をしていきます。
しかし、表示させるのはHTMLの「秒」の部分には、目標から何秒かではなく、
あくまで０〜５９までの数字が入ればよいので、
目標から何秒かという数を60で割り算をして、その余り（秒を意味する）を保存します。
その要領で、他の「分」「時」「日」を計算していきます。
小数点以下は出てくると具合が悪いので、Math.floorプロパティで整数に整形しています。
「%」は%の右に入力する数で割り算をした「余り」を意味します。
（例： 10 ％ 3 は 10を3で割った余りなので1を表す。）
const sec = Math.floor(rest / 1000) % 60;
const min = Math.floor(rest / 1000 / 60) % 60;
const hours = Math.floor(rest / 1000 / 60 / 60 ) % 24;
const days = Math.floor(rest / 1000 / 60 / 60 / 24);最後に、後に扱い易いように、それぞれ計算したものを配列に保存しておきます。
const count = [days, hours, min, sec];② 入力されたフォームを読み取る
まず、入力用のテキストボックスを用意します。
type属性は入力する部分のデータの種類を指定するのに使います。
例えば、テキストデータを入力したい時はinput type=”text”を用いて、
数を入力させたい時はinput type=”number”を使います。
フォーム部分の最後に送信ボタンを置きます。
input type=”submit”は汎用ボタンを表します。
次に、先ほどテキストフィールドに入力したデータを読み取っていきます。
textContentプロパティを使って、outputという名前の要素にフォームに入力されたテキストを表示させます。
その他の入力フィールドのものは、一旦他の変数としてconstを使って定義しておきます。
末尾のvalueは入力された「値」を読み取るために記述します。
countdown.js
document.getElementById('output').textContent = document.getElementById('form').deadline.value + "まで";
const yearnum = document.getElementById('form').year.value;
const monthnum = document.getElementById('form').month.value;
const daynum = document.getElementById('form').day.value;③ 何度も計算して再表示し続ける
まず、未来の日にちを設定します。
②で入力され、保存されたものから自動で計算します。
const goal = new Date(yearnum, monthnum - 1, daynum);recalc関数がコードの最下部に書かれているので、続いてこの関数が機能する。
textContentプロパティを使って、所定の位置に表示させます。
呼び出すのは、先ほど計算して配列に保存しておいたものを、配列の番号で呼び出していきます。
document.getElementById('day').textContent = counter[0];
document.getElementById('hour').textContent = counter[1];しかし、これだけでは、何度も計算されることはありません。
このrecalc関数の中の最後にrefreshという関数があることで、繰り返し計算されています。
unction recalc() {
const counter = countdown(goal);
document.getElementById('day').textContent = counter[0];
document.getElementById('hour').textContent = counter[1];
document.getElementById('min').textContent = String(counter[2]).padStart(2, '0');
document.getElementById('sec').textContent = String(counter[3]).padStart(2, '0');
refresh();
}refresh関数では、setTimeoutを使って、ある時間間隔で関数を呼び出します。
ここでは1000ミリ秒、つまり１秒間隔でrecalc関数を呼び出しています。
function refresh() {
setTimeout(recalc, 1000);
}３ おわりに
このような手順でカウントダウンタイマーが作られています。
数字が動いているように見えるのですが、実際は繰り返し計算をし、再表示しているのですね！
勉強になりました(^^)
- オリンピックまで何日？
- 結婚記念日まで何日？
- 夏休みまで何日？
調べてみたい人はぜひ使ってみてください！
Dead Line
全コード
最後まで読んでくださり、ありがとうございます！