[日付・時刻]〆切(期限)日時まであとどのくらいの日数・時間が残っているのかをJavaScriptでリアルタイムにカウントダウン表示し続ける機能を作ってみましょう。現在日時と指定日時の差を求めて、差から残り日数・時刻を計算し、setIntervalメソッドを使って1秒ごとに表示を更新するだけで作れます。期限日時までをリアルタイムにカウントダウン表示する方法JavaScriptを使って、〆切(期限)日時まであとどのくらいの日数・時間があるのかをリアルタイムにカウントダウンし続ける機能を作ってみましょう。指定の日時までにあと何ミリ秒あるのか?をJavaScriptで得る方法は、記事「指定日までの残り日数を計算して表示する」で解説しました。一定間隔ごとに特定の処理を自動実行する方法は、記事「経過時間(秒数)をリアルタイムに表示する」で解説しました。この2つを組み合わせれば、期限日時まで、ひたすらカウントダウンし続ける機能も簡単に作れます。サンプルとして日時が既に入っていますが、書き換えればその日時までをカウントダウンします。※ここにカウントダウンが表示されます。「上記の日時までカウントダウンする」ボタンをクリックすると、その瞬間に再計算されて表示します。......が、最初から1秒毎に自動更新しているので、ボタンを押さなくても最大1秒待つだけで再計算されてカウントダウン表示は更新されます。00:00:00からのミリ秒)に変換する。00:00:00からのミリ秒)に変換する。「現在日時の数値」と「指定日時の数値」を引き算して、日数(ミリ秒)の差を計算する。分解して、カウントダウン表示用の文字列を作成する。上記1~5を、1秒毎に繰り返す。他に、1桁の数字を2桁に調整する機能や、数字以外の文字が入力された場合には0として解釈する機能など、エラー対策も含んでいますが。以下に、HTML+JavaScriptソースに関して簡単に解説してみます。(※解説をすっ飛ばして全体のソースを見たい場合は、本ページ末尾の項目「リアルタイムカウントダウン機能を作るHTML+JavaScriptソースのまとめ」へどうぞ。)カウントダウン日付の入力欄と、カウントダウン掲載領域を作るHTMLソースとりあえず、HTMLで以下の6個の入力欄を作っています。JavaScript側から参照するために、id属性を使って名前を付けています。>秒あと、実際にカウントダウンを表示するための領域を以下のように確保しています。>※ここにカウントダウンが表示されます。</p>上記のid名「RealtimeCountdownArea」を使って、JavaScriptから表示を更新します。現在日時と指定日時の差を求めて、残り日数・時間を計算するJavaScriptソース指定日時までの残り時間をカウントダウンするためには、「指定日時」から「現在日時」を引き算する必要があります。その辺の処理に関しては、記事「指定日までの残り日数を計算して表示する」で解説していますから、詳しくはそちらをご参照下さい。ここでは、以下のようにJavaScriptソースを記述しています。冗長なソースですが、「何をやっているのか?」の分かりやすさを重視して、短くせずに記述しています。実際に活用する際は、もっと短く書いた方が良いと思います。^^;......と言いつつ、エラー処理部分は省略しているのですが。そこを含めるとソースを解釈しにくくなりそうなので。^^;(末尾のソースまとめには記載しています。00:00:00からのミリ秒)に変換して、変数dnumNowに格納しています。00:00:00からのミリ秒)に変換して、変数dnumTargetに格納しています。Dateオブジェクトでは、月の指定は、「1月が0」・「2月が1」......「12月が11」になるので、1を引いています。-1;}上記で、2つの変数を引き算して、日数(ミリ秒)の差を計算しています。掛けて正の値にしています。「割った解」と「割った余り」を使っていくことで、日→時→分→秒の順に抜き出しています。日数は変数dDaysに、時間は変数dHourに、分は変数dMinに、秒は変数dSecに入ります。なんかもうちょっとスマートな方法があるような気がしますが(^_^;)、まあ上記でもちゃんと計算はできます。カウントダウンの画面表示文字列を作るJavaScriptソース次に、計算結果を画面に表示する必要があります。冒頭のサンプルでは、ユーザが入力した日時も含めて表示しています。それらのソースは以下の通りです。dlSec;上記で、変数msg1に、ユーザが指定した日時が文字列として格納されます。実際には、「1桁の数字を2桁固定にする」処理を含んでいますが、上記では見た目を簡単にするために省略しています。先も述べましたが、月は「1月が0」・「2月が1」......「12月が11」になっているので、ここでは1を足しています。ユーザが入力した文字列を直接は利用せずに、カウントダウン計算用のDateオブジェクトから日付を求めているのは、ユーザの入力内容をそのまま出力する危険を避けるためです。"秒";上記で、変数msg2に、残り日数・時間が文字列として格納されます。ここがカウントダウンのメインです。Math.floorは、小数点以下を取り去る関数です。これがないと、小数点以下がずらーっと並んでしまいます。ソースを見やすくするために改行していますが、全部を1行で書いても問題ありません。