タイマータイマーの設定と解除
- テキストボックスに文字を流す〔タイマー(指定秒数後に処理を実行)〕
- 文字を動かす(IEのみ)〔タイマー(指定秒数後に処理を実行)〕
- 定期的に画像を入れ替え表示〔タイマー(定期的に処理を実行)〕
- 画面の自動スクロール〔タイマー(定期的に処理を実行)〕
テキストボックスに文字を流す
タイマー(指定秒数後に処理を実行)
unknown
変数名 = window.setTimeout ( function 実行する処理, float 時間 )
window.clearTimeout ( 変数名 )
window.clearTimeout ( 変数名 )
タイマーを設定するにはsetTimeoutを使用します。 時間はミリ秒単位(1秒=1000ミリ秒)で指定します。 例えば5秒後に処理を実行したい場合は、5000を指定します。
タイマーを解除するにはclearTimeoutを使用します。
サンプルを見る<script type="text/javascript"> var timeID=0; var n=0; var message=" 人気No1のペットはチワワです"; var maxlen=message.length; /* メッセージを流す */ function changeMessage() { var frm=document.form4; if(n==0) frm.messageboard.value=""; /* 1文字ずつ追加表示 */ frm.messageboard.value+=message.substr(n,1); n++; /* maxlen文字数表示したらリセット */ if(n==maxlen) n=0; clearTimeout(timeID); /* 流すスピードは500ミリ秒(0.5秒) */ timeID=setTimeout("changeMessage()", 500); } /* メッセージを止める */ function stopMessage(){ clearTimeout(timeID); } </script> <form action="#" name="form4"> MessageBoard:<input type="txet" id="messageboard" size="50"> <input type="button" name="play" value="play" onclick="changeMessage()"> <input type="button" name="stop" value="stop" onclick="stopMessage()"> </form>
文字を動かす(IEのみ)
タイマー(指定秒数後に処理を実行)
unknown
変数名 = window.setTimeout ( function 実行する処理, float 時間 )
windoow.clearTimeout ( 変数名 )
windoow.clearTimeout ( 変数名 )
IEのみ
<style type="text/css"> .layer { left:5px; top:200px; position:absolute; font-size:13px; font-weight:bold; color:purple; background-color:yellow; } </style> <script type="text/javascript"> /** * レイヤ移動(IEのみ) */ var tx=5; /* レイヤ初期表示位置(x座標) */ var ty=200; /* レイヤ初期表示位置(y座標) */ var min=5; /* x座標の最小値 */ var max=500; /* y座標の最大値 */ var xdr=1; var speed=1; /* 移動量(座標のpx値) */ var tmr=20; /* タイマー(ミリ秒) */ var timerID1=0; var timerID2=0; var xdr=1; function draw2(){ if (document.all){ //IE document.all("text1").style.pixelTop=ty; /* 縦方向の座標 */ if (document.all("text1").style.pixelLeft > min){ /* x座標の最小値になるまで左へ移動 */ document.all("text1").style.pixelLeft-=(speed*xdr); } } } function draw1(){ if (document.all){ //IE document.all("text1").style.pixelTop=ty; /* 縦方向の座標 */ if (document.all("text1").style.pixelLeft<max){ /* x座標の最大値になるまで右へ移動 */ document.all("text1").style.pixelLeft+=(speed*xdr); } } } function main1(){ document.forms[0].stop2.click(); draw1(); /* main1()関数が呼び出される度に、timerIDをクリアする。 クリアしないと、スピードがどんどん速くなります。 呼び出した分クリアしないと止まりません。 */ clearTimeout(timerID1); /* tmrの値の間隔でmain()を実行するというスケジュールをセット */ timerID1=setTimeout("main1()",tmr); } function main2(){ document.forms[0].stop1.click(); draw2(); clearTimeout(timerID2); timerID2=setTimeout("main2()",tmr); } </script> <div id="text1" class="layer">文字を動かす(IEのみ)</div> <form action="#" name="form3"> <input type="button" name="toright" value="← 左へ移動" onclick="main2();" /> <input type="button" name="stop2" value="左移動停止" onclick="clearTimeout(timerID2);" /> <input type="button" name="stop1" value="右移動停止" onclick="clearTimeout(timerID1);" /> <input type="button" name="toleft" value="右へ移動 →" onclick="main1();" /> </form>
定期的に画像を入れ替え表示
タイマー(定期的に処理を実行)
unknown
変数名 = window.setTimeout ( function 実行する処理, float 時間 )
windoow.clearTimeout ( 変数名 )
windoow.clearTimeout ( 変数名 )
タイマーを設定するにはsetIntervalを使用します。 時間はミリ秒単位(1秒=1000ミリ秒)で指定します。 例えば5秒後に処理を実行したい場合は、5000を指定します。
タイマーを解除するにはclearIntervalを使用します。
サンプルを見る<script type="text/javascript"> var timeID; /* ブラウザ判別 */ var ie=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 var opera=window.opera?1:0 /* 画像の配列 */ var gazo=new Array() gazo[0]="/content/img/skin/pengin.gif" gazo[1]="/content/img/skin/pengin_doki.gif"; /* 入れ替えのスピード */ var speed=1000; /* カウント変数 */ var cnt=0; /* 画像入れ替え処理 */ function gazoChange(){ var obj=ns6 ? document.getElementById('pengin') : document.all('pengin'); if (cnt<gazo.length){ obj.src=gazo[cnt]; cnt++; }else{ cnt=0; obj.src=gazo[cnt]; } } /* タイマー処理 */ function init(){ clearInterval(timeID); /* ボタン連打による加速防止 */ timeID=setInterval("gazoChange()",speed); } /* ページの読み込み完了時に実行 */ if(ie || ns6 || opera){ window.onload=init; } </script> <p> <img src="/content/img/skin/pengin.gif" id="pengin" name="pengin" width="43" height="58" alt="ペンギン" /> </p> <form action="#"> 画像入れ替え処理: <input type="button" value="再開" onclick="init();" /> <input type="button" value="停止" onclick="clearInterval(timeID);" /> </form>
画面の自動スクロール
タイマー(定期的に処理を実行)
unknown
変数名 = window.setInterval( function 実行する処理, float 時間 )
window.clearInterval( 変数名 )
サンプルを見るwindow.clearInterval( 変数名 )
<script type="text/javascript"> var timerID; function ScrollStart(){ /* 0.2秒間隔でscroll()関数をコール */ timerID=setInterval("scroll()",200); } function scroll(){ /* 10pxずつ下方向へ画面をスクロール */ window.scrollBy(0,10); } function ScrollStop(){ /* タイマーを解除し、スクロール処理を停止 */ clearInterval(timerID); } </script> <form action="#"> <input type="button" value="画面スクロール開始" onclick="ScrollStart()" /><br> <input type="button" value="画面スクロール停止" onclick="ScrollStop()" /> </form>