| ポイント |
<![CDATA[
for (i=0; i<count; i++) txt += str[i];
if (document.all) document.all["outText"].innerHTML = txt;
setTimeout("setTextLine()",1000);
<div id="outText" style="position:absolute;top:50px;left:5px;">
]]>
|
| 説 明 |
画面上に出力するためにdivタグで表示位置をスタイルシートで指定しておきます。あらかじめ表示する文字列を配列変数に格納しておき、抜き出す配列の参照番号を増やします。「document.all["オブジェクト名"].innerHTML」でHTMLタグごと出力します。タイマーを使って一定時間ごと繰り返すことで１行づつ表示されるようになります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>１行づつ画面上に出力する</title>
<script Language="JavaScript"><!--
str = new Array();
str[0] = "Sample text...(^^)/<br>";
str[1] = "１行づつ表示します。<br>";
str[2] = "By KaZuhiro FuRuhata<br>";
str[3] = "<a href='http://www.shiojiri.ne.jp/~openspc/'>OpenSpace</a>";
count = 0;
function setTextLine()
{
if (count >= str.length) return;
txt = "";
count++;
for (i=0; i<count; i++) txt += str[i];
if (document.all) document.all["outText"].innerHTML = txt;
setTimeout("setTextLine()",1000);
}
// --></script>
</head>
<body>
<a href="javaScript:setTextLine()">出力開始</a>
<div id="outText" style="position:absolute;top:50px;left:5px;"></div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
１行づつ画面上に出力する