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

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript で文字を 1 字ずつ表示させる等、動きのある表示のサンプルを紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．文字をスクロールさせる

　
文字をスクロールさせて表示します。
表示させる文字とスクロールの回数を入力して、表示ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">

let i;　//スクロール表示のカウンタ
let j;　//スクロール表示をする回数
let 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);
	let 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">

let i;　//カウンタ
let 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">

let i;　//カウンタ
let str;　//表示させる文字列

function disp() {

    //カウンタを初期化
    i = 0;

    //表示させる文字列を取得
    str = document.getElementById("dat").value;

    oneChar();
}

function oneChar() {

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

▲目次へ戻る