カウントダウンとメッセージの表示

　　設定した時間までのカウントダウンと、到達した時点でのメッセージを表示します。
　　今回はステータスバーに表示してみました。

HTML　JavaScript　コメント
<HTML>
<HEAD>
<TITLE>カウントダウンとメッセージの表示</TITLE>
<script language="javascript">
<!--

//終了時刻を変数に代入
y=2010; //年
m=1; //月
d=1; //日
h=0; //時
f=0; //分
s=0; //秒
//タイマーと点滅用フラグの初期化
 timer1 = 0;
flg = 0;

function countdown(){
   clearTimeout(timer1); //タイマーを一旦クリア
   now_d = new Date(); //現在時刻を取得
   now_t = now_d.getTime(); //getTimeは1970年1月1日からの時間をミリ秒単位で返す

   //終了時刻を設定 
   //月は0〜11の値で表されるため、-1する。
   goal_d = new Date(y,m-1,d,h,f,s);
   goal_t=goal_d.getTime();

   //終了までの秒数を取得
   //終了から現在までのミリ秒数を1000で割り四捨五入して秒単位にする。
   lag = Math.round((goal_t-now_t)/1000);

   if (lag >= 0) { //終了時刻に達していなければ、ステータスバーにカウントダウンのメッセージ
       window.status = y+"年"+m+"月"+d+"日"+h+"時"+f+"分"+s+"秒"+"まであと、"+lag+"秒！！";
       timer1 = setTimeout("countdown()",1000); //タイマーを１秒に設定
   }
   else { //終了時刻に達した場合、ステータスバーにメッセージを点滅
       if (flg == 0) {
           window.status = "カウントダウン終了！！";
           flg = 1;
       }
       else {
           window.status = " ";
           flg = 0;
       }
   timer1 = setTimeout("countdown()",500); //点滅用のタイマーを500ミリ秒に設定
   }
}
countdown();
// -->
 </script>
</HEAD>
<p align="center">ステータスバーにカウントダウンを表示します。</p>
</HTML>
解説

ステータスバーに終了時刻までのカウントダウンを毎秒表示し、終了時にはメッセージを点滅させます。
詳細はコメントを読んでいただければ大体わかると思いますが、最初の変数に代入する値を変えることで、任意の終了時刻を設定できます。

2000年末に、トップページで21世紀までのカウントダウンをしていました。
そのスクリプトは、こちら です。すでに終了時刻を過ぎていますので、メッセージが表示されます。

戻る