文字を一文字ずつ表示する(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 one_char() {
	document.title = str.substring(0, i++);
	if (i <= str.length) setTimeout("one_char();", 200);
}
window.onload = one_char;
// -->
</script>
</head>
<body>
  :
  :
</body>
</html>

指定された文字列の数をインクリメントして代入します。substring() で変数 str の最初の文字から i++ でインクリメントされる文字を代入していきます。インクリメントするのは、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 char_loop() {
	window.status = str.substring(0, j++);
	if (str.length < j) j = 0;		// インクリメントの回数と文字列の数を比較する

	setTimeout("char_loop();", 200);
}
window.onload = char_loop;
// -->
</script>
</head>
<body>
  :
  :
</body>
</html>

1回だけの表示の例にインクリメントされた回数と指定した文字列の数を比較して、全て表示されたらインクリメントされる数値を 0 にして再度インクリメントすることによってループさせます。

この例では、ステータスバーに表示します。

[PR] Yahoo!ショッピング