Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@yamatech

jQueryで1文字ずつタイプ表示するテスト (2) 改行編

More than 5 years have passed since last update.

jQueryで1文字ずつタイプ表示するテスト (2) 改行編

今回はこの3行の文章を試してみた。

Hello, World!!
へんじがない
ただのしかばねのようだ


HTMLファイル作成

※前回と変わりはない。

index.html
<!DOCTYPE html>

<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>test</title>
</head>

<body>
    <div id="test"></div> // ここにテキストを表示する

    // jsファイルとjQuery読み込み
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="test.js"></script>
</body>

</html>

JavaScriptファイル作成
test.js
$(function() {

    var txt = "Hello, World!!\nへんじがない\nただのしかばねのようだ";
    var txtArr = txt.split("");
    var count = 0;

    var txtCount = function() {
        var timer = setTimeout(txtCount, 250);
        $('#test').append(txtArr[count].replace(/\n/, "<br>"));
        count++;
        if (count == txtArr.length) {
            clearTimeout(timer);
        }

    }
    txtCount();

});

解説
    var txt = "Hello, World!!\nへんじがない\nただのしかばねのようだ";
    var txtArr = txt.split("");
    var count = 0;

変数 txt に改行コード \n を入れて3行分の文章を代入する。
"Hello, World!!\nへんじがない\nただのしかばねのようだ"

この改行コード \n は後で <br> タグに変換する。
そうしないと 「Hello, World!!\nへんじがない\nただのしかばねのようだ」 とそのまま出力されてしまう。
なら初めから <br> タグじゃダメなのか?といっても、その場合も 「Hello, World!!<br>へんじがない<br>ただのしかばねのようだ」 と表示されてしまうのでいずれにしても変換が必要。
詳細は後述。

変数 txtArr と count は前回と同じで、変数 txt の内容を split("") で1文字ずつに分割して配列にする。
文字数のカウンターとして変数 count を作り 0 で初期化。

実際に動作させる関数を格納する変数 txtCount

var txtCount = function() {
        var timer = setTimeout(txtCount, 250);
        $('#test').append(txtArr[count].replace(/\n/, "<br>"));
        count++;
        if (count == txtArr.length) {
            clearTimeout(timer);
        }

    }

基本的には前回と同じで、setTimeoutで txtCount を指定した時間(ここでは250)一定間隔で繰り返し動作させる。
count++ を繰り返し、出力は id#test に append メソッドで1文字ずつ追加していくよう表示する。

前回との大きな違いは改行コードの部分。

$('#test').append(txtArr[count].replace(/\n/, "<br>"));

id#test に append で出力の際に先述の改行コード \n を replace で <br> タグに変換する必要がある。
書き方は
replace(/変換元の文字/,"<変換するタグ>")

最後に txtCount( ); で実行して表示する。


サンプル

--> 実行サンプル


関連記事

「jQueryで1文字ずつタイプ表示するテスト (1)」
http://qiita.com/R2Y_mn/items/3d3aa162f920bd7b70dd

>>「jQueryで1文字ずつタイプ表示するテスト (2) 改行編」

「jQueryで1文字ずつタイプ表示するテスト (3) 点滅カーソル付けた編」
http://qiita.com/R2Y_mn/items/5255cc5ccbe59ce61435

「jQueryで1文字ずつタイプ表示するテスト (4) お名前を入力編」
http://qiita.com/R2Y_mn/items/287c83f9da1c093395e0

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yamatech

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?