上記の書籍を参考にして行きます。
カウントダウンタイマー
１、Dateオブジェクトの時間を設定する。
Dateオブジェクトは、日時を扱うためのオブジェクトです。
できることは、以下のようになります。
① 現在日時を取得する。
② 過去や未来の日時を設定する
③ 日時の計算をする
このオブジェクトは、１つの基準日を記憶しています。そのため、最初に初期化して使う事になります。また、初期化して()内にパロメータを含まない場合は、現在日時を記憶した状態で初期化されます。これを、プログラミングではインスタンスといいます。
<script>
let goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);
console.log(countdown(goal));
const counter = countdown(goal);
const time = `${counter[1]}時間${counter[2]}分${counter[3]}秒`;
document.getElementById('timer').textContent = time;
</script>
このときに、最初の変数ｇoalに初期化した現在日時を代入することで、初期化を図る事ができます。
次に、個々に時間と分、秒を取得します。
開いてるページの最後の時刻が設定されます。
ここで、値を作った後に、カウントダウンファンクションを作ります。
<script>
function countdown(due) {
const now = new Date();
const rest = due.getTime() - now.getTime();
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];
return count;
}
</script>
関数の処理の中(due)に先程、作ったDateオブジェクトを受け取ります。
定数const(これは変わることのない)を初期化した日時を代入します。
getTimeメソッドは、1970年1月1日０時０分からを基準にします。
これを、Dateオブジェクトで取得した日時から引いています。その値を定数restに代入しています。
このミリ秒をもとに秒、分などを計算しています。
すべて出揃ったところで、これらを配列として、定数カウントに代入します。
配列とは、複数のデータを１つにまとめるときに使います。
また、これらを呼び出すためにリターンで返します。
最初に関数による処理を作って、console.log(counddown(goal));で配列を呼び出すことができます。
Math.floorとは、小数点を切り捨てる場合に使用します。
では、これをコンソールに呼び出していきます。
const counter = countdown(goal);
const time = `${counter[1]}時間${counter[2]}分${counter[3]}秒`;
console.log(time);
document.getElementById('timer').textContent = time;
定数カウンターにcountdown(goal)を代入し、定数timeにcountdown(goal)に保存した値をindex番号順に呼び出し、代入します。
そして、それらの値をconsole.logで呼び出します。
またこれらをHTMLに出力する場合は、まずidに紐づけます。そして、textContentでテキスト情報を取得します。
これが左のコードです。そしてtimeに代入して出力します。