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

colmun_main8851

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

目次

 
1.文字をスクロールさせる
2.1 文字ずつ表示させる
3.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メソッドをご参照下さい。

▲目次へ戻る

 

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

▲目次へ戻る

 

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です