イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.59 - メッセージが右から左へ流れる表示
|
Step.9やStep.11でフォームに変化のあるメッセージを表示しました。 今回は１つのページ内に複数のフォームを貼りつけて、それぞれに異なったメッセージを表示してみます。 |
| Step テーマ ● 複数のサンプルを使うには |
実行例 |
リスト<script type="text/javascript"><!-- // 第1フォームの設定 myMsg1 = "いらっしゃいませ こんにちは！ ごいっしょにポテトはいかがですか？ "; myMsg1 = myMsg1 + myMsg1; myCnt1 = 0; // 第2フォームの設定 myMsg2 = "今なら半額！ ひとつ、たったの６５円！ チーズは８０円です！ "; myMsg2 = myMsg2 + myMsg2; myCnt2 = 0; function myFunc(){ // 第1フォームの表示 document.myForm1.myFormMes1.value = myMsg1.substring( myCnt1 , myMsg1.length ); myCnt1 = ( myCnt1 == (myMsg1.length/2)-1 ) ? 0 : myCnt1 + 1; // 第2フォームの表示 document.myForm2.myFormMes2.value = myMsg2.substring( myCnt2 , myMsg2.length ); myCnt2 = ( myCnt2 == (myMsg2.length/2)-1 ) ? 0 : myCnt2 + 1; } // --></script> <form name="myForm1"> <input type="text" size="30" name="myFormMes1"> </form> <form name="myForm2"> <input type="text" size="30" name="myFormMes2"> </form> <script type="text/javascript"><!-- setInterval( "myFunc()", 200 ); // --></script> |
| サンプルだけの HTMLは こちらへ |
説明[Q] ひとつのページに複数のフォームを取り入れるには、どうすればよいでしょうか？ [A] では、説明しましょう。といっても、サンプルを見たら説明いらないでしょうか (^^; Step.9 や、Step.11で、フォームに変化のある文字表示をしました。 ふたつのフォームを取り入れたければ、ふたつサンプルをコピーして貼りつければと、思いつけば、それはそれで十分です。 ・・・が、できれば、ひとつのページに setInterval() は、ひとつにしたいものです。 もちろん、それぞれのフォームに表示するスピードを変えるとなれば、setInterval() もふたつあったほうが楽ですが、すべて同じスピードやタイミングでよければ、１つで十分です。 この Step の setInterval()は、周期間隔が狭くて 負荷がかかるために 遅い端末を使っている人には表示がきつくなるかもしれません。 では、プログラム的な説明 サンプルは、Step.11のマーキー表示を1ページに二つ表示しています。 二つメッセージがあるので、変数myMsg も、それぞれ違う名前にしなければなりません。 サンプルでは、フォーム１のメッセージを myMsg1、フォーム２のメッセージを myMsg2 としました。 非常に安易な名前です。それぞれにもっと、まともな名前をつけましょう (^^; それぞれのメッセージも文字の長さがちがいます。よって、myCnt もそれぞれ必要です。 サンプルでは、myCnt1、myCnt2 としております。 まとめると、 変数名、関数名は重複しないように、別の名前に変更する。 setInterval() は、できるだけ 1個で済むように、myFunc() 内に統合する。 参考ステップ Step.5 フォームを使って日付と時間をリアルタイムに表示してみましょう Step.6 日付表示はありきたり？ だったら表現を変えてみましょう Step.8 点滅するメッセージを表示してみましょう Step.9 左から１文字ずつメッセージを表示してみましょう Step.10 「Step.8」と「Step.9」を組み合わせてメッセージを表示してみましょう Step.11 右から左へ流れるメッセージを表示してみましょう |
 |