【JavaScript】プログラミング授業案⑰【オリンピックカウントダウンタイマー】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
どんな授業を行うか、検証を兼ねて検討しています。
今回は、カウントダウンタイマーの制作です。
ちょうど延期しているオリンピックの開会式に合わせて作ってみました。

今回の学習成果

2021年TOKYOオリンピック開会式まで

あと日時間分秒

 <p>2021年TOKYOオリンピック開会式まで</p>
  <p class="timer">あと<span id="day"></span>日<span id="hour"></span>時間<span id="min"></span>分<span id="sec"></span>秒</p>

spanタグがたくさんあります。
divだとblock要素なので、縦に並んで行ってしまいます。
そこで登場するのがspanタグです。
これならinline要素なので、文字がそのまま横に並んでいってくれますね。

CSSの記述

timerクラスのフォントサイズと、さらにその中のspanタグの部分については数字が大きくなるように設定してあります。
色を変えてもいいですね。

JavaScriptの記述

countdownのfunctionで設定時刻から現在時刻を引いて、かなり頑張って日時の計算をしています。
const goal = new Date(2021, 6, 23, 20);
ここが目標時刻になります。
東京オリンピックの開会式は2021年7月23日の20:00だそうです。
new Date(年, 月, 日, 時, 分, 秒)と続くので、20時までを入力してあります。
あとは省略してあります。
そのあとは、1秒ごとにカウントを更新してくれるようにしてあります。
1000ミリ秒=1秒ってところが、なんともです。