
プログラミング
2023.01.30
ITコラム
2018.01.09
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript で文字を 1 字ずつ表示させる等、動きのある表示のサンプルを紹介します。
文字をスクロールさせて表示します。
表示させる文字とスクロールの回数を入力して、表示ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- var i; //スクロール表示のカウンタ var j; //スクロール表示をする回数 var str; //スクロール表示をする文字列 function disp() { //スクロール表示のカウンタを初期化 i = 0; //スクロール表示をする回数を取得 j = Number(document.getElementById("dat2").value); //スクロール表示をする文字列を取得( 前に相当のスペースを付ける ) str = " " + document.getElementById("dat").value; scroll(); } function scroll() { document.getElementById("dat3").value = str; str = str.substring(1) + str.charAt(0); var stop = setTimeout("scroll();", 200); i++; if (i > str.length * j) clearTimeout(stop); } //--> </script> <div style="background-color : #CCC;"> <input type="text" id="dat" placeholder="文字を入力して下さい。"> <div style="display:inline-flex;"> <input type="text" id="dat2" size="4">回 <input type="button" value="表示" onClick="disp()"> </div> <input type="text" id="dat3" placeholder="こちらに表示されます。"> </div>
関数 scroll 内の「 str.charAt(n) 」で 変数 str の ( n+1 )番目の文字を取得します。
仮に、変数 str に「 あいうえお 」が格納されているとすると、 str.substring(1) の値が「 いうえお 」、str.charAt(0) の値が「 あ 」になり、1 回目の処理が終了する時の変数 str の値は「 いうえおあ 」となります。
実際には、表示させる文字列の前に相当のスペースを付けているため、スペースが 1 文字分ずつ動いた後に、「 あいうえお 」、「 いうえお あ 」、「 うえお あい 」、…のように 変数 str の内容が変化して、表示スペースに 文字列がスクロールされているように出力されます。
setTimeoutメソッドでタイマー設定をした内容を 変数に代入しておくと、clearTimeoutメソッドを「 clearTimeout(タイマー設定をした変数) 」のように使用して、タイマーを終了させることができます。
setTimeoutメソッドについては、setTimeoutメソッドをご参照下さい。
文字を 1 文字ずつ表示します。
表示させる文字を入力して、表示ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- var i; //カウンタ var str; //表示させる文字列 function disp() { //カウンタを初期化 i = 0; //表示させる文字列を取得 str = document.getElementById("dat").value; oneChar(); } function oneChar() { document.getElementById("dat2").value = str.substring(0, i++); if (i <= str.length) setTimeout("oneChar();", 200); } //--> </script> <div style="background-color : #CCC;"> <div style="display:inline-flex;"> <input type="text" id="dat" placeholder="文字を入力して下さい。"> <input type="button" value="表示" onClick="disp()"> </div> <input type="text" id="dat2" style="color:red;" placeholder="こちらに赤文字で表示されます。"> </div>
「 str.substring(0, i++) 」で、変数 str の最初の文字から i++ でインクリメントされる文字数文の文字列を取得していきます。
setTimeoutメソッドで繰り返し実行されるので、実行される度にインクリメントされます。
setTimeoutメソッドについては、setTimeoutメソッドをご参照下さい。
文字列を 1 文字分だけ続けて表示します。
表示させる文字を入力して、表示ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- var i; //カウンタ var str; //表示させる文字列 function disp() { //カウンタを初期化 i = 0; //表示させる文字列を取得 str = document.getElementById("dat").value; oneChar(); } function oneChar() { var flag = document.getElementById("dat2").value = str.substring(i++, i); if (flag) setTimeout("oneChar();", 500); } //--> </script> <div style="background-color : #CCC; padding : 20px 20px 1px;"> <div style="display:inline-flex; align-items: center;"> <input type="text" id="dat" placeholder="文字を入力して下さい。" size="60%"> <input type="button" value="表示" onClick="disp()"> </div> <input type="text" id="dat2" placeholder="こちらに表示されます。"> </div>
「 str.substring(i++, i) 」で、変数 i の値が常にインクリメントされます。
i = 0 の場合は「 str.substring(0, 1) 」となり、変数 str の 1 文字目から 2 文字目の手前までを取得します。
同様に、i = 1 の場合は「 str.substring(1, 2) 」となり、変数 str の 2 文字目から 3 文字目の手前までを取得します。
この処理を setTimeoutメソッドによって繰り返し実行しているため、最初の文字から順に 1 文字分だけ表示されていきます。
setTimeoutメソッドについては、setTimeoutメソッドをご参照下さい。
プログラミング
2023.01.30
プログラミング
2023.01.24
転職ノウハウ
2023.01.23
転職ノウハウ
2023.01.20
転職ノウハウ
2023.01.16
インタビュー
2023.01.13
INTERNOUS,inc. All rights reserved.