| ポイント |
<![CDATA[
str = "Sample text...(^^)/ By KaZuhiro FuRuhata";
count++;
txt = str.substring(0,count);
if (document.all) document.all["outText"].innerHTML = txt;
document.layers["outText"].document.write(txt);
<div id="outText" style="position:absolute;top:50px;left:5px;">
]]>
|
| 説 明 |
画面上に出力するためにdivタグで表示位置をスタイルシートで指定しておきます。あらかじめ表示する文字列を変数に格納しておき、抜き出す位置を１文字づつずらします。IE4以降では「document.all["オブジェクト名"].innerHTML」でタグを出力し、NN4では「document.open()」「document.write()」、「document.close()」を使ってレイヤーに出力します。タイマーを使って一定時間ごと繰り返しすことで１文字づつ表示されるようになります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>１文字づつ画面上に出力する</title>
<script language="JavaScript"><!--
str = "Sample text...(^^)/ By KaZuhiro FuRuhata";
count = 0;
function setText1()
{
if (count > str.length) return;
count++;
txt = str.substring(0,count);
if (document.all) document.all["outText"].innerHTML = txt;
if (document.layers)
{
document.layers["outText"].document.open();
document.layers["outText"].document.write(txt);
document.layers["outText"].document.close();
}
setTimeout("setText1()",100);
}
// --></script>
</head>
<body>
<a href="javaScript:setText1()">出力開始</a>
<div id="outText" style="position:absolute;top:50px;left:5px;"></div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
１文字づつ画面上に出力する