まず、htmlの中にテキストとspan idでtextContentでJSで取得したデータを置き換える要素を作っておきます。
<p id="timer">知ってました？大阪万博まであと<span id="day"></span>日<span id="hour"></span>時間<span id="min"></span>分<span id="sec"></span>秒</p>
次に、関数countdownを作っていきます。引数はdue(意味：期限）です。
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;
}
まず、Dateオブジェクトのインスタンス化をする。
rest(意味：残り)にdue(つまり、期限）オブジェクトにgetTime()メソッドで1970年１月１日０：００からの時間をミリ秒で取得。
そこから、今の時間までのミリ秒を引いて代入する。
const count =[day,hours,min,sec];
は配列で、この後インデックス番号を使って呼び出すときに使う。
そして、return count;でcount配列を呼び出す。
次は、目標の時間を設定する。
const goal =new Date(2025,4,3)
これは、定数goalにDateオブジェクトを使って日時を設定している。
＜日時を設定した状態でDateオブジェクトを初期化（つまりインスタンス化）する＞
new Date(年、月、日、時、分、秒、ミリ秒);
注意点：月は0が１月、1が２月、2が３月というふうにコンピュータとこちらが表示させたい月に１ヶ月のズレがある。
この場合、new Date(2025,4,3)となっているがこの場合コンピュータ側の4なので、こちら側の5月になる。
function recalc(){
const counter=countdown(goal);
document.getElementById('day').textContent=counter[0];
document.getElementById('hour').textContent=counter[1];
document.getElementById('min').textContent=counter[2];
document.getElementById('sec').textContent=counter[3];
refresh();
}
この関数内では、定数counterに上で定義したcountdown(due)関数の引数dueに一つ上で定義したgoal=new Date(2025,4,3)を代入して、関数recalc()関数 return count;でcount=[days,hours,min,sec]を返す。
そして、一番上で書いたコードにcounter配列をインデックス番号で指定して書き換える。
その後にrefresh()関数を呼び出す。しかし、refresh()関数はまだ作っていないのでこのあと説明する。
次はrefresh()関数を定義する。
function refresh(){
setTimeout(recalc,1000);
}
setTimeout()メソッドは指定した関数名を()を付けずに指定して、カンマの後ろに指定した数値ミリ秒後にもう一度指定した関数を呼び出すというもの。
つまり
setTimeout(関数名,ミリ秒);
つまり、recalc()関数の最後でrefresh()関数を呼び出すということは、１秒毎にrefresh()関数からまたrecalc()関数を呼び出して、そのrecalc関数内でまたrefresh()関数を呼び出しているということ。
recalc();
そして最後にrecalc()関数を呼び出している。
参考：JavaScript超入門書p１５４〜