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

　　設定した時刻までのカウントダウンと、到達した時点でのメッセージを表示します。
　　ステータスバーのメッセージに加え、メッセージボックスも表示してみました。

HTML　JavaScript　コメント
<HTML>
<HEAD>
<TITLE>カウントダウンとメッセージの表示 2</TITLE>

<script language="javascript">
<!--

//終了時刻を変数に代入
y=2001; //年
m=1; //月
d=1; //日
h=0; //時
f=0; //分
s=0; //秒

//タイマーの初期化
timer1 = 0;
//点滅用、メッセージボックス用フラグの初期化
flgblink = 0;
flgmsg = 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 = "カウントダウン！21世紀まであと、"+lag+"秒！！";
       timer1 = setTimeout("countdown()",200); //タイマーを0.2秒に設定・・・*1
   }
   else { //終了時刻に達した場合、
       if (flgmsg == 0) { //メッセージボックスを表示
           window.alert("ようこそ21世紀へ！(^.^／");
           flgmsg = 1; //メッセージボックス用のフラグを立てる。・・・*2
       }

       if (flgblink == 0) { //ステータスバーにメッセージを点滅
           window.status = "21世紀もよろしくお願いいたします。m(__)m";
           flgblink = 1;
       }
       else {
           window.status = " ";
       flgblink = 0;
       }
       timer1 = setTimeout("countdown()",500); //点滅用のタイマーを500ミリ秒に設定
   }
}
countdown();
// -->
</script>
</HEAD>
<p align="center">ステータスバーにカウントダウンを表示し、
ゴールに達した時にはメッセージボックスを開きます。</p>
</HTML>
解説

*1
　前回はカウント用のタイマーを1秒に設定しました。ロジックとしてはこれで正しいはずですが、どうもタイムラグがあるようで、カウントされない秒数が発生してしまいます。
　そこで今回は、0.2秒に設定しました。これならカウント漏れは起こらず、タイムラグがあっても気にならないでしょう。

*2
　終了時刻に達した後は、メッセージボックスを表示させます。500ミリ秒おきにこの処理がくり返されるので、何度も表示されるのを防ぐためにフラグを立てます。

戻る