<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- var i = 0; var str = "ごきげんいかがですか?"; function str_this() { var flag = document.forms[0].text1.value = str.substring(i++, i); if (flag) setTimeout("str_this();", 500); } // --> </script> </head> <body onload="str_this();"> <form action="#"> <input type="text" name="text1" value=""> </form> </body> </html>
str.substring(i++, i); では、変数 i の値が常にインクリメントされます。つまり、i = 0; のときの内部では str.substring(0, 1); となりますので、変数 str の1番目から2番目の文字列を抜き出します。次の処理時の変数 i の値は 1 になりますから、内部では str.substring(1, 2); となりますので、変数 str の2番目から3番目の文字列を抜き出します。この処理を setTimeout() で繰り返し実行していますので一文字だけ抜き出して表示します。
この例では、指定したフォームに表示します。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var j = 0;
var str = "ごきげんいかがですか?";
function this_loop() {
document.getElementById("scroll").innerHTML = str.substring(j++, j);
if (j == str.length + 2) j = 0;
setTimeout("this_loop();", 500);
}
// -->
</script>
</head>
<body onload="this_loop();">
<div id="scroll"> </div>
</body>
</html>
ループさせるには、これもインクリメントの回数と文字列の数を比較して対象の値に 0 を代入します。このままでは1回ループが終了したときにすぐループが始まってしまうため、str.length に適度な数値を追加します。
str.length に追加した値は、(str.length に追加した数値) * (setTimeout の値) / 1000 = ループ間の間隔(秒)となりますので、ある程度の間隔が空きます。なお、ループ間の間隔を入れない場合はここに数値は入れないでください。
この例では、指定したエレメントに表示します。(ループ間の空き時間は 2 * 500 / 1000 = 1 なので1秒です)