上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 第7回はタイマー処理です。
 「イベントハンドラ」の一種で、「指定した一定時間が経ったら、処理を実行する」というものです。
 例えば、一定時間ごとに画像やテキストを切り替えるなど、アニメーション、時計などに利用できます。




タイマー処理



一回だけタイマー処理をする

T1 = setTimeout("GOGO()",1000);

■「T1」は、変数名です。自由に設定出来ます。これは特別な変数で「識別変数」といいます。タイマーを何個も併用する場合は、それぞれに識別変数を設定します。

■「GOGO()」は、「関数」です。「function GOGO(){ ~ }」で設定した「プログラムの塊」を実行します。

■「1000」は、「ミリ秒」です。1000であれば、1秒後にタイマー処理が発動します。


 この場合、タイマー処理が終了したらタイマーを解除しておくのが基本です。
 例えば、「function GOGO(){ ~ }」という関数内のプログラムの塊の中で、以下のタイマー解除プログラムで、タイマー処理を完了・解除させておきます。

clearTimeout(T1);

■「T1」は、先ほどの「識別変数」です。
 この場合は「T1タイマー」を解除したという事になります。



指定した一定時間ごとに繰り返しタイマー処理をする

T2 = setInterval("GOGO()",1000);


 この場合も「setTimeout」と同じような構文です。「setInterval」とすることで、延々一定時間ごとに「GOGO()」を実行します。
 解除方法も「setTimeout」同様です。

clearInterval(T2);





サンプル



 タイマーの「インターバル」の方を使って、数字アニメーションを作ってみました。「0~1000」まで「1/1000秒」ごとに数値がどんどん増えていき、数字が1000になったら、今度はどんどん数字が減っていきます。数字がまた0に戻ったら、またはじめから繰り返します。







■サンプルのスクリプト
<button type="button" onclick="GOGOstart()">スタート</button>
<button type="button" onclick="GOGOstop()">ストップ</button>

<div id="test"></div>

<script type="text/javascript">
aaa=0;
keisan=5;

function GOGO(){
if (aaa>=1000) {keisan=-5;
} else if (aaa<=-1) {keisan=5;
}
aaa=aaa+keisan;
document.getElementById("test").innerHTML=aaa;
}

function GOGOstart(){
T1=setInterval('GOGO()',1);
}

function GOGOstop(){
clearInterval(T1);
}
</script>





■次回は、「スタイルシート操作」についてです。スタイルシートを直接Javaスクリプトから編集できるようになると、今回のインターバルと組み合わせれば、もっと画像的なアニメーションっぽいものが作れます。
CSSをJavaスクリプトから操作する
このエントリーをはてなブックマークに追加
Sat.03.26.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。