【JavaScript】カウントダウンタイマーを作る

#プログラミング勉強日記
2020年11月10日
書籍でカウントダウンタイマーの作成しました。
忘れそうなので、記録しておきます。

#概要
現在時刻から明日までの残り時間を表示するタイマーを作成します。

#完成品

メモ

現在時刻から11月11日までの残り時間を表示するタイマーを作成しました。 pic.twitter.com/B9qtdAprMv

— ミキ🐹@プログラミング (@mikiprogram) November 10, 2020

#コード

index.html

<p>11月11日まであと<span id="timer"></span>です。</p>

script.js

'use strict';

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;
}

let goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);

function recalc() {
    const counter = countdown(goal);
    const time = `${counter[1]}時間${counter[2]}分${counter[3]}秒`;
    document.getElementById('timer').textContent = time;
    refresh();
}
function refresh() {
    setTimeout(recalc,1000);
}

recalc();

#コードの中でつまづいたところ解説（自分用）

###const rest = due.getTime() - now.getTime();

script.js

    const rest = due.getTime() - now.getTime();

getTime()....1970年1月1日0時0分から、対象のオブジェクトの基準日になっている日時までに経過した時間をミリ秒で取得します。

仮に、今が2020年9月30日15時00分だとすると、getTimeメソッドで16014456000000ミリ秒が出力します。
これを同日の23時59分59秒のミリ秒から引いた数を、定数restに代入しています。

1601477999000 - 16014456000000 = 32399000←定数restに代入

####const sec = Math.floor(rest / 1000) % 60;

script.js

    const sec = Math.floor(rest / 1000) % 60;

• Math.floor....小数を切り捨て

• (rest / 1000)....restは32399000ミリ秒のため1000で割って全体の秒を求めます。(ミリ秒→秒)

• 32399000 / 1000 = 32399秒←23時59分59秒まで残り32399秒です。

• % 60....残り秒数から60を割ると分になりますが、1分に満たないのが秒数なので60で割った余りを求めます。(0~59秒の間)

• 32399 % 60 =539 余り59となります。

• 当たり前ですが、割る数より余りが大きくなることはないので、0~59の間を取得したい時は、60で割った余りを求めます。

• 分も1時間＝60分なので60で割った余りを求めます。

• 時間は1日 = 24時間なので24で割った余りを求めます。(0~23の間)

#参考

• Math
• 【JavaScript入門】setTimeoutの使い方とサンプル事例まとめ！