多数カウントダウン


えーと、一日の中の節目にあわせて複数のカウントダウンを行います。
ひとつのイベントが済んだら次のイベントまでの残り時間を求める、というような動作です。
TimerListを適当に変更してみてください。
OnAir Timerをこの手法で拡張してみるのも面白いかも。
以下Script
  <script>
    //カウントダウン用の配列設定
    var TimerList = new Array();
    TimerList[0]  = "9:00:00,始業まで@time@です。";
    TimerList[1]  = "12:00:00,お昼休みまで@time@です";
    TimerList[2]  = "13:00:00,お昼休み終了まで@time@です";
    TimerList[3]  = "17:00:00,終業時間まで@time@です";
    
    //インデックスを求める関数の動的作成
    document.write("<script>function getIndex(time){");
    for (i = -1;i<TimerList.length;i++){
      var tmp1 = (i==-1) ? 0 : TimerList[i].split(",")[0].split(":")[0]*3600 + TimerList[i].split(",")[0].split(":")[1]*60 + eval(TimerList[i].split(",")[0].split(":")[2]); 
      var tmp2 = (i==TimerList.length-1) ? 24*3600 : TimerList[i+1].split(",")[0].split(":")[0]*3600 + TimerList[i+1].split(",")[0].split(":")[1]*60 + eval(TimerList[i+1].split(",")[0].split(":")[2]);
      document.write("if (", tmp1 ," <= time && time <" , tmp2 ,"){ var index = " ,( i == (TimerList.length - 1)) ? 0 : i + 1,"; }");
    }
    document.write("return index;}</script>");
    
    //カウントダウンメイン
    function timer(){
      myD   = new Date();
      nowTime = myD.getHours() * 3600 + myD.getMinutes() * 60 + myD.getSeconds();
      var index = getIndex(nowTime);
      targetTime = TimerList[index].split(",")[0].split(":")[0] * 3600 + TimerList[index].split(",")[0].split(":")[1] * 60 + eval(TimerList[index].split(",")[0].split(":")[2]);

      myMsec = targetTime - nowTime;
      myMsec = (myMsec < 0) ? 24 * 3600 + myMsec : myMsec;
      
      myNextHour = Math.floor(myMsec/(3600));    // カウントダウン用 '時' 取得
      myMsec     -= (myNextHour*(60*60));        // 経過秒から'時'を引く
      myNextMin  = Math.floor(myMsec/(60));      // カウントダウン用 '分' 取得
      myMsec     -= (myNextMin*(60));            // 経過秒から'分'を引く
      myNextSec  = Math.floor(myMsec);           // カウントダウン用 '秒' 取得

      myDisp = "";                               // 時間バッファ クリア
      myDisp+=myNextHour+"時間";
      myDisp+=myNextMin+"分";
      myDisp+=myNextSec+"秒";
      
      myDisp = TimerList[index].split(",")[1].replace("@time@",myDisp);
      window.status = myDisp;                     // StatusBar
      document.myForm.myFormDate.value = myDisp;  // フォーム
                              
      if (document.layers) {                      //レイヤー
        document.layers["layer1"].document.open();
        document.layers["layer1"].document.write(myDisp);
        document.layers["layer1"].document.close();
      }
      else if (document.all) {
        document.all("layer1").innerHTML = myDisp;
      }                 
      else if (document.getElementById){
        document.getElementById("layer1").innerHTML = myDisp;
      }
      setTimeout("timer()",1000);
    }
  </script>
  <body onload="timer()">
多数カウントダウン
WebSite：JavaScriptの部屋別館
E-Mail ：blaze@gol.com
最終更新日：2001/10/19