カウントダウンメニュー

7899 ワード
自分用メモ プログラミング JavaScript JavaScript テキストリンク

上記の書籍を参考にして行きます。

カウントダウンタイマー

１、Dateオブジェクトの時間を設定する。
Dateオブジェクトは、日時を扱うためのオブジェクトです。
できることは、以下のようになります。
　①　現在日時を取得する。
　②　過去や未来の日時を設定する
　③　日時の計算をする

このオブジェクトは、１つの基準日を記憶しています。そのため、最初に初期化して使う事になります。また、初期化して()内にパロメータを含まない場合は、現在日時を記憶した状態で初期化されます。これを、プログラミングではインスタンスといいます。

index.html
<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に初期化した現在日時を代入することで、初期化を図る事ができます。
次に、個々に時間と分、秒を取得します。
開いてるページの最後の時刻が設定されます。

ここで、値を作った後に、カウントダウンファンクションを作ります。

index.html
<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とは、小数点を切り捨てる場合に使用します。

では、これをコンソールに呼び出していきます。

index.html
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に代入して出力します。

参考　
https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577