javascript_countdown

なわてん開催まであと何日?のカウントダウンを作ってみよう


なわてん開催前の現在、開催まであと何日と何時間か、という文字がサイドメニューに表示されていますが、実は簡単なJavaScriptで作成することができます。

JavaScriptはブラウザ上で動かせるプログラムで、HTML文書内に直接書くことができますので、テキストエディタがあれば書くことができます。

HTML文書は、「タグ」「属性」「値」「テキスト」などの部品で構成されていますが、JavaScriptは、これらの部品ひとつひとつを「オブジェクト」として、内容を制御する事ができます。
プログラムは「値」や「テキスト」を扱える当然のことながら、「時間」もオブジェクトとして扱うことができます。
皆さんのPCに表示されているローカル時間は、実は基準になっている日時から何ミリ秒経過したかを計算して表示されています。

なわてん開催日は2018年2月3日11時ですので、現在日時と開催日時の間にある時差を求めることができます。

残り時間 = 開催日時 ー 現在日時

この残り時間を常に計算し続けることで、だんだん縮まっていく残り時間を表示し続けることができます。
これをJavaScriptで書くとこのようになります。

var Xday = new Date(2018,1,3,11);
var Today = new Date();
var MyRestDays = Xday - Today;

1秒毎に繰り返しプログラムを実行して差を求めると、このような値を得ることができます。

****

この値はミリ秒です。ミリ秒は1000分の1秒ですので、これを1000で割ると秒、さらに60で割ると分、さらに60で割ると時、さらに24で割ると日になります。

****

なわてん開催まであとわずかですね。4回生の皆さん、がんばってください!

Comments are closed.