ITコラム

JavaScript

2018.01.09

JavaScript【サンプル】９～動く文字

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 文字ずつ表示させる

　
文字を 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メソッドをご参照下さい。

▲目次へ戻る