第７回

第７回
今回の実験は、第６回のをちょっと変えて次々と表示させるようにします。実際に実行すると、下のようになります。

どうですか？これは作るのに結構時間がかかりました。このプログラムは、第５回の、「１文字づつ表示する」のと、第６回のinnerHTMLを組み合わせて作りました。 innerHTMLは、JavaScriptで使用すると、●.innerHTML=▲;という風に記述します。 ●＝オブジェクト名　▲＝文字列　を表します。それでは、ソース・解説付きです。
<script type="text/javascript"> <!-- str=new String("このように"); ←strは、本文の１列目を文字列として格納しています。 str2=new String("表示されます");　←str2は、本文の２列目を文字列として格納しています。 i=0;j=0;msg="";msg2="";　　　　　 ←i,jはfor文に使われる変数と同じ働きをします。msg,msg2は、実際に表示される文を代入します。 function sta(){　　　　　　　　　 ←スタートするための関数 setID=setInterval("first()",150); ←setIDに１行目用のインターバルタイマーを格納します。 } function first(){ msg+=str.charAt(i);　　　　　　　 ←msgに次の１文字を追加します。 one.innerHTML=msg;i++;　　　　　　←oneの中身をmsgにします。iを増やして指定する文字の位置を１つ下げます。 if(i>=str.length){　　　　　　　　←strの文字数にiが達したときに行う処理を指定します。 seter=setInterval("second()",150);←seterに２行目用のインターバルタイマーを格納します。 clearInterval(setID);　　　　　　 ←１行目用のインターバルタイマーを削除します。 }} function second(){　　　　　　　　←ここから２行目。１行目と内容に変化はありません。 msg2+=str2.charAt(j); two.innerHTML=msg2;j++; if(j>=str2.length){ clearInterval(seter); }} //--> </script> //<body>タグに下のように埋め込みます。 <div id="one"></div><div id="two"></div>
変数は改造可能です。これに手を加えると、途中の文字からはじめることも可能です。それでは、第７回の実験を終了します。
top