<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 = " "; // 適度に間隔を空けます
str += "ぐるぐるどーん"; // 実際に表示する文字
function one_scroll() {
var flag = document.forms[0].text1.value = str.substring(i++, str.length);
if (flag) setTimeout("one_scroll();", 200);
}
// -->
</script>
</head>
<body>
<form action="#">
<input type="text" name="text1" value="">
<input type="button" value="表示する" onclick="one_scroll();">
</form>
</body>
</html>
substring() によって変数 str のインクリメントされた i 番目の文字から最後の文字を取得します。これを setTimeout() によって文字列がある間繰り返し実行することにより、変数 i がインクリメントされますのでスクロールしているように見えます。
この例では、指定したフォームに表示します。
<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 str = "ぐるぐるどーん ";
function str_scroll() {
window.status = str;
str = str.substring(1) + str.charAt(0); // 変化させる文字列の取得
setTimeout("str_scroll();", 200);
}
window.onload = str_scroll;
// -->
</script>
</head>
<body>
:
:
</body>
</html>
はじめに取得する変数 str の値は「ぐるぐるどーん 」です。str.charAt(n) で変数 str の n 文字目（charAt(0) の 0 は1文字目）の文字列を取得します。
1番最初に関数が呼ばれたときの変数 str は「ぐるぐるどーん 」ですが、 str.substring(1) の値が「るぐるどーん 」、str.charAt(0) の値が「ぐ」になりますので、1回目の処理が終了する時の変数 str の値は「るぐるどーん ぐ」ということになります。
次に setTimeout() によって2回目の処理時の変数 str の値は「るぐるどーん ぐ」（上記で最初の変数 str が変化したため）なので、str.substring(1) の値は「ぐるどーん ぐ」、str.charAt(0) の値は「る」になります。よって、変数 str の値は「ぐるどーん ぐる」ということになります。
この処理がその都度代入されますので、文字列がスクロールしているように見えます。また、str2 = str2.substring(1) + str2.charAt(0); を str2 = str2.substring(1); だけとするとループはしません。
この例では、ステータスバーに表示します。
<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 limit_scroll() {
document.title = str;
str = str.substring(1) + str.charAt(0);
var stop1 = setTimeout("limit_scroll();", 200);
if (j++ >= str.length * 3) clearTimeout(stop1); // ループさせたい回数を入れてください
}
window.onload = limit_scroll;
// -->
</script>
</head>
<body>
:
:
</body>
</html>
上記と同じですが、何回ループしたかをカウントして if 文で条件に合ったら、clearTimeout() を使用してループを止めます。ループは繋がっている文字列が1番左側から消えた時が1回です。
この例では、ブラウザのタイトルバーに表示します。（ループが終了したらもとのタイトルに戻るようにしています）
<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 n = 0;
var str = " ぐるぐるどーん";
function change_scroll() {
document.getElementById("scroll").innerHTML = str;
str = str.substring(1) + str.charAt(0);
setTimeout("change_scroll();", 200);
if (n++ == str.length * 3) { // ここに入れた回数をループして
str = " がちょーん"; // この文字列に切り替わります
}
}
// -->
</script>
</head>
<body onload="change_scroll();">
<span id="scroll"> </span>
:
:
</body>
</html>
上記のループを止めるものを少し変更して、指定したループ回数に達したら切り替わります。
この例では、指定したエレメントに表示します。