イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.54 - タイピング表示（複数行編）
|
Step.53のタイピング表示を複数行に表示できるようにしてみましょう。 |
| Step テーマ ● innerHTML - 指定した要素の内容を書き換える |
実行例こんにちは
|
リスト<script type="text/javascript"><!-- myMsg = "いらっしゃいませ@こんにちは！@それでは@さようなら！"; myCR = "@"; // こいつを改行コードにする myCnt = 0; // 表示している現在の文字位置用 function myFunc(){ if (myCnt == 0){ myMess = ""; }else{ myChar = myMsg.substring( myCnt-1 , myCnt ); if (myChar == myCR){ // 改行制御コードか？ myMess = myMess + "<BR>"; }else{ // 文字 myMess = myMess + myChar; } } myStr = myMess + "_"; // カーソルっぽいのを付ける myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt+1; document.getElementById( "typing" ).innerHTML = myStr; } // --></script> <DIV id="typing" style="height:80pt">こんにちは</DIV> <SCRIPT type="text/javascript"><!-- setInterval( "myFunc()", 200 ); // --></SCRIPT> |
| サンプルだけの HTMLは こちらへ |
説明前回、Step.53 でタイピングメッセージを表示してみましたが、それを改造して複数行に表示できるようにしてみましょう。 今回のポイントは、 「文章を改行するには、どうすればいいでしょう。。」 innerHTML は、渡す文字列の中に タグがあれば、文字ではなく タグとして機能します。 なので、<BR> を文字列にいれれば、改行してくれます。 myMsg = "いらっしゃいませ<BR>こんにちは！"; しかし、今回の主旨は１文字ずつ表示です。 このまま実行すると、「いらっしゃいませ<..」と表示されて、「おっとタグでやんの」とあわてて 「いらっしゃいませ」 「こ…」と表示されます。 タグの「<..」がちらちらと見えていたら鬱陶しいので、サンプルでは <BR>タグを「@」の１文字に置き換えました。 myMsg = "いらっしゃいませ@こんにちは！"; myCR = "@"; // こいつを改行コードにする プログラムでは１文字ずつ見ながら、「@」がきたら「<BR>」に置き換えるという処理をしています。 myChar = myMsg.substring( myCnt-1 , myCnt ); if (myChar == myCR){ // 改行制御コードか？ myMess = myMess + "<BR>"; }else{ // 文字 myMess = myMess + myChar; } メッセージ内に「@」を使うのであれば、 myCR = "@"; // こいつを改行コードにする を使わない文字に変更すればOKです。 参考ステップ Step.9 左から１文字ずつメッセージを表示してみましょう Step.28 オープニングロゴを作ってみましょう (setTimeout) Step.44 日付と時間をリアルタイムに表示してみましょう Step.53 タイピング表示をしてみましょう |
Q&A[Q] 繰り返すのでは無く、一回で処理を終了させたいのですが [A] 以下の行を変更してください。 setTimeout( "myFunc()" , 200 ); // ぐるぐる回る／スピード ↓ if (myCnt != 0) setTimeout( "myFunc()" , 200 ); // ぐるぐる回る／スピード |
 |