JavaScript【 サンプル 】9 ～ 動く文字
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript で文字を 1 字ずつ表示させる等、動きのある表示のサンプルを紹介します。
目次
１．文字をスクロールさせる
２．1 文字ずつ表示させる
３．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 文字ずつ表示させる
文字を 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 文字分だけ続けて表示させる
文字列を 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メソッドをご参照下さい。
▲目次へ戻る
