2010年05月12日

JavaScript setTimeout , clearTimeout

スポンサード リンク

 setTimeout();
設定した時間のあとに処理を実行します。

setTimeout("fanc()",msec)

サンプルソース

<html>
 <head>
  <title>setTimeout()</title>
<style type="text/css">
<!--
#msgbox{ /*文字列表示ボックスのスタイル*/
  font-size:20 px;
  color: green;
  width: 520px;
  font-weight: bold;
  border: 1px solid gray;
  padding: 5px;
 }
       /*上記のスタイルは動作に関係なし*/
-->
</style>

<script language="JavaScript">
<!-- //javascript123
 var msg = new Array(); //表示するメッセージの配列
  msg[0]="JavaScript (ジャバスクリプト) サンプル";
  msg[1]="CSS(スタイルシート) サンプル";
  msg[2]="clearTimeout() 設定したタイマーを解除する";

 var flag= false;
 var i= 0;
 var msec= 1500;//指定ミリ秒

function toguru(){//条件によって実行、停止を切り替え
 (flag == false)?flag = true: flag = false;
 if(flag==true){
  document.getElementById("botan").value = "ストップ"; //ラベルの変更
  chgmsg();
 }
else{
 document.getElementById("botan").value ="スタート";
 clearTimeout(Timer);
     }
  }

function chgmsg(){//指定時間でメッセージ切り替え
 document.getElementById("msgbox").innerHTML = msg[i];//文字列変更
 i++;
  if(i==msg.length){i=0;}
    Timer=setTimeout("chgmsg()",msec);
  }
// -->
</script>
</head>
<body>
<p id ="msgbox">setTimeout("fanc()",msec)</p>
<input type="button" id ="botan" value="スタート" onclick="toguru()"><p>
</body>
</html>

Timer=setTimeout("chgmsg()",msec);
 指定した msecミリ秒が経過すると chgmsg()を実行します。
clearTimeout(Timer);
 Timer=setTimeout(); で設定したタイマーをキャンセルします。
条件分岐
(flag == false)?flag = true: flag = false;
  条件が真なら1つ目の文、偽なら2つ目の文を実行します。
サンプルではflagがtlueの場合chgmsg()配列変数msg[i]
格納されている文字列を順番に表示していきます。
flagがfalseであればclearTimeout();でタイマーを解除して停止します。

トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
配列 javascript
setTimeout() 文字がフェードイン,フェードアウトします
setTimeout() 文字の拡大 縮小
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!



posted by javaScript at 20:41 | 大阪 ☁ | ウインドウ | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。