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 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() で繰り返し実行していますので一文字だけ抜き出して表示します。

この例では、指定したフォームに表示します。

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 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">&nbsp;</div>
</body>
</html>
 

ループさせるには、これもインクリメントの回数と文字列の数を比較して対象の値に 0 を代入します。このままでは1回ループが終了したときにすぐループが始まってしまうため、str.length に適度な数値を追加します。

str.length に追加した値は、(str.length に追加した数値) * (setTimeout の値) / 1000 = ループ間の間隔(秒)となりますので、ある程度の間隔が空きます。なお、ループ間の間隔を入れない場合はここに数値は入れないでください。

この例では、指定したエレメントに表示します。(ループ間の空き時間は 2 * 500 / 1000 = 1 なので1秒です)

[PR] Yahoo!ショッピング