一定時間ごとに関数を呼び出す setInterval("呼び出す関数" , 呼び出す間隔);

[サンプル]

[ソースコード]

<form name="timer">
<input type="text" name="moji" size="30" value="" />
<input type="button" id="btn" value="スタート" />
</form>

<script type="text/JavaScript">
var start = document.getElementById('btn');
btn.onclick = function(){
	setInterval("hyoji()" , 500); // setInterval("呼び出す関数" , 呼び出す間隔)
	
	1回目の呼び出し：substr(0 , 0+1)　「一」
	2回目の呼び出し：substr(0 , 1+1)　「一文」
	3回目の呼び出し：substr(0 , 2+1)　「一文字」
	4回目の呼び出し：substr(0 , 3+1)　「一文字ず」
	5回目の呼び出し：substr(0 , 4+1)　「一文字ずつ」
	hyoji()が呼び出されるたびにdocument.timer.moji.value.lengthの値が1ずつ増えていく=一文字ずつ多く切りだされていく
	
}

function hyoji(){ // この関数をsetIntervalで実行
var str = "一文字ずつ表示します。";

var cnt = document.timer.moji.value; // input type="text"のvalueにアクセス
var len = cnt.length; // valueの要素数を取得 ※この時点ではinput type="text"のvalueは空なのでlengthは0

	if(len < 11){
		document.timer.moji.value = str.substr(0 , len+1); // name="moji"のvalueにstrを代入  最初の実行では0。次の実行では1。※substr()についてはコチラ
	}else{
		document.timer.moji.value = ""; // name="moji"のvalueを空にする
	}
}
</script>

※formのtype="text"のvalueを取得する方法についてはコチラ
※formのtype="radio"のvalueを取得する方法についてはコチラ

インデックスにもどる