イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.53 - タイピング表示
|
Step.9 のタイピング表示を innerHTML でやってみましょう。 |
| Step テーマ ● innerHTML - 指定した要素の内容を書き換える |
実行例こんにちは
|
リスト<SCRIPT type="text/javascript"><!-- myMsg = "いらっしゃいませ こんにちは！"; myCnt = 0; function myFunc(){ myMess = myMsg.substring( 0 , myCnt ) + "_"; myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt+1; document.getElementById( "typing" ).innerHTML = myMess; } // --></SCRIPT> <DIV id="typing">こんにちは</DIV> <SCRIPT type="text/javascript"><!-- setInterval( "myFunc()", 200 ); // --></SCRIPT> |
| サンプルだけの HTMLは こちらへ |
説明このサンプルは Step.9 で説明したフォームにタイピング表示するスクリプトを innerHTML に変更しただけです。 内容は Step.9 と Step.44 あたりを参照してくださいませ。 ● 古臭いブラウザ対応 ログ [IE4] document.all("typing").innerText = myMess; [NN4] document.layers["typing"].document.open(); document.layers["typing"].document.write("<div>"); document.layers["typing"].document.write(myMess); document.layers["typing"].document.write("</div>"); document.layers["typing"].document.close(); 参考ステップ Step.9 左から１文字ずつメッセージを表示してみましょう Step.44 日付と時間をリアルタイムに表示してみましょう Step.54 タイピング表示をしてみましょう（複数行版） |
 |