1文字づつ画面上に出力する


動作ブラウザ 【 IE:4.0  NN:4.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × × × - × -
Macintosh × - × × × - - ×
UNIX - - - - - × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント 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タグで表示位置をスタイルシートで指定しておきます。あらかじめ表示する文字列を変数に格納しておき、抜き出す位置を1文字づつずらします。IE4以降では「document.all["オブジェクト名"].innerHTML」でタグを出力し、NN4では「document.open()」「document.write()」、「document.close()」を使ってレイヤーに出力します。タイマーを使って一定時間ごと繰り返しすことで1文字づつ表示されるようになります。
サンプル <html> <head> <title>1文字づつ画面上に出力する</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!

写真素材 PIXTA