何らかのイベント当日までのカウントダウンを表示したいという要望は結構あると思います。

今回はJavaScriptを使って目標とする日付までの日数をカウントダウンするスクリプトをご紹介します。

コード

<script type="text/javascript" language="javascript">// <![CDATA[
// 今日の日付を取得
var today = new Date();

// 開催日を設定
// ※ 月は0~11までで指定
var targetDay = new Date(2014,0,1);

// 1日のマイクロ秒で除算をすると
// 開催日までの日数が算出できる
remainDay = Math.floor((targetDay - today) / (24*60*60*1000));

// 開催前日の場合は残り0日になってしまうのを防止
remainDay++;

if (remainDay > 0) {
	document.write("開催まで残り"+remainDay+"日");
}
else if (remainDay < -1) {
	document.write("ご来場ありがとうございました!");
}
else {
	document.write("今日は開催日です!");
}
// ]]></script>

注意点など

月の指定が0~11で指定しなければならない点が注意です!!

算出した残り日数を文字列に変換して、桁をずらしながら数値を判定し、画像ファイルを読みこめば画像ファイルを使ったカウントダウンも実現できます。

本日は以上です。