平成30/ 2018-10-20 06:06
Javascript プログレスバー タイマー カウントダウン
01. settimeoutで引数渡したいとき。
tid = setTimeout('display(\''+pre_ct+'\', \''+now_ct+'\')', 1)

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript">
  // メイン関数
  function main() {
    var bar = document.getElementById("progressbar");
    var progress = 0;
    // タイマーを使って定期的にプログレスバーを更新
    var id = setInterval( function(){
      progress++;
      // if ( progress >= 100 ) progress = 0;
      if ( progress == 492 ) clearInterval(id);
      // 進捗状況に応じてプログレスバーの背景gifの位置を再設定する。
      bar.style.backgroundPosition = -492+progress + " 0";
    }, 123 );
   }


var myCnt = 0;
var myTim = 0;

function time(){

  //mySelect = document.myForm.myMenu.selectedIndex;

  //myCnt = eval(document.myForm.myMenu.options[mySelect].value);
  myCnt = 60;

  myTim = setInterval("myTimer()",1000);

}


function myTimer(){

  myCnt = myCnt-1;

  //document.myForm.myFormSec.value = "あと "+ myCnt + " 秒";
  document.getElementById("tv").innerHTML = "あと "+ myCnt + " 秒";


  if (myCnt == 0){

    clearInterval(myTim);

  }
}




  </script>
  <style type="text/css">
    body {
      /* background-color: #E2E2E2; */
    }
    div#progressbar {
      border: 1px solid #66CCFF;
      width: 492px;
      height: 27px;
      background-image: url("http://xxx.com/images/inspe_bor_aftertime.gif"); /*背景画像としてアニメーションgifを指定*/
      background-repeat:repeat-y;  /*背景の繰り返しはx方向のみ*/
      background-position: -492 0; /*最初は非表示にしておく。*/
    }
  </style>
</head>
<body onload="time();main();">
  <!-- プログレスバーの表示領域 -->
<div id="tv">あと 60 秒</div>
<div id="progressbar" />

</body>
</html>


(Thanks.)
http://www.red.oit-net.jp/tatsuya/java/noodles.htm

http://webcache.googleusercontent.com/search?q=cache:1VVHKLNmUWMJ:www9.plala.or.jp/oyoyon/html/script/timeout.html+setInterval+%E3%81%A8%E3%82%81%E3%82%8B&cd=1&hl=ja&ct=clnk&gl=jp&client=firefox-a&source=www.google.co.jp
setTimeout() は指定した時間後に一度だけ実行しますが、setInterval() は指定した間隔の処理を実行します。setInterval() の処理を止めるには clearInterval() を使用します。

(参考)
http://stacktrace.jp/jquery/ui/widgets/progressbar.html