タイマータイマーの設定と解除
- テキストボックスに文字を流す〔タイマー（指定秒数後に処理を実行）〕
- 文字を動かす（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>