指定日まで毎日自動でカウントダウン
今回は、指定の日まで、あと何日あるかをカウントダウン表示する方法をご紹介致します。元日や誕生日、その他の記念日などを設定して、自動カウントダウンさせてみましょう。
簡単なJavaScriptで実現ですので、ぜひご活用下さい。
動作サンプル：
JavaScriptを使って計算
実現には、JavaScriptを利用するのが最も手軽でしょう。
「2008年まであとXX日」と表示するだけなら、下記のわずかなソースだけで実現できます。
<script language="JavaScript"><!--
var now = new Date();
var point = new Date(2008,1-1,1);
var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) );
if(countdown > 0) {
document.write('2008年まであと、', countdown ,'日！');
}
else {
document.write('あけましておめでとう！');
}
// --></script>
var now = new Date();
var point = new Date(2008,1-1,1);
var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) );
if(countdown > 0) {
document.write('2008年まであと、', countdown ,'日！');
}
else {
document.write('あけましておめでとう！');
}
// --></script>
HTMLファイルに、そのままコピー＆ペーストするだけで使用できます。
2008年1月1日までは「あとxx日」と表示され、2008年1月1日以降は「あけましておめでとう」と表示されます。
■赤色太字部分：
日付を「2003年1月1日」以外にしたい場合は、ここを書き換えるだけです。年・月・日の順にカンマで区切って指定します。 月の指定だけは「1月が0」「2月が1」…「12月が11」となるので、分かりやすいように、「指定月-1」という記述にしてあります。
■青色太字部分：
実際にページ上に表示される文字です。ここも好きなように書き換えられます。 ただし、シングルクオーテーション（「'」）を表示したい場合は「¥'」と記述する必要があります。
表示例：
カウントアップもできるようにするには
上記のソースでは、「期日前のカウントダウン」表示と「期日到来メッセージ」表示の2種類しか用意できません。
そこで、期日が過ぎたら1日ずつカウントアップして、「XX日前に過ぎました」のような表示をできるようにしてみましょう。
