【JavaScript】テキストを1文字ずつ表示して途中で変換してみる

こんにちは！セミマサです。以前の記事で作成したテキストを1文字ずつ表示するスクリプトを発展させて文字を途中で変換してみました。

以前の記事はこちら

デモサイト
ソースコード
おわりに

デモサイト

今回のデモサイトです。

デモサイトへ

ソースコード

HTML

<section>
    <div class="text-box">
        <p id="text">きょう1もwebでせみ2がなく3</p>
    </div>
</section>

<p id="text">きょう1もwebでせみ2がなく3</p>

</div>

</section>

今回のHTMLです。

id:textを付与したp要素の中に文字列を入れておきます。文字列の途中に入っている数字は後述するスクリプトで使います。

CSS

.text-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 50vh;
}
#text{
  font-size: 1.5rem;
}
@media screen and (max-width: 480px) {
  #text{
    font-size: 1rem;
  }
}

.text-box{

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

width: 100vw;

height: 50vh;

}

#text{

font-size: 1.5rem;

}

@media screen and (max-width: 480px) {

#text{

font-size: 1rem;

}

CSSはこちらです。以前の記事と同様のものになります。

JavaScript

const text = document.getElementById("text").textContent;
document.getElementById("text").textContent = "";
const maxCount = text.length;
count = 0;
const wait = 200;
const textConversionWriter = (_text,_maxCount)=>{
    let nowText = document.getElementById("text").textContent;
    let nextText;
    if(count < _maxCount){
        nextText = _text.charAt(count);
        if(nextText === "1"){
            nowText = "今日";
            nextText = "";
        }
        if(nextText === "2"){
            nowText = "今日もwebでセミ";
            nextText = "";
        }
        if(nextText === "3"){
            nowText = "今日もwebでセミが鳴く"
            nextText = "";
        }
    }else{
        nowText = "";
        nextText = "";
    }
    document.getElementById("text").textContent = nowText + nextText;
    if(count === maxCount){
        count = 0;
    }else{
        count++;
    }
    setTimeout("textConversionWriter(text,maxCount)",wait);
};
textConversionWriter(text,maxCount);

const text = document.getElementById("text").textContent;

document.getElementById("text").textContent = "";

const maxCount = text.length;

count = 0;

const wait = 200;

const textConversionWriter = (_text,_maxCount)=>{

let nowText = document.getElementById("text").textContent;

let nextText;

if(count < _maxCount){

nextText = _text.charAt(count);

if(nextText === "1"){

nowText = "今日";

nextText = "";

}

if(nextText === "2"){

nowText = "今日もwebでセミ";

nextText = "";

}

if(nextText === "3"){

nowText = "今日もwebでセミが鳴く"

nextText = "";

}

}else{

nowText = "";

nextText = "";

}

document.getElementById("text").textContent = nowText + nextText;

if(count === maxCount){

count = 0;

}else{

count++;

}

setTimeout("textConversionWriter(text,maxCount)",wait);

};

textConversionWriter(text,maxCount);

今回のスクリプトです。

・定数textにp要素内のテキストを代入し、p要素内のテキストを空にします。

・定数maxCountにtextの文字数を代入します。

・グローバル変数countに0を代入します。

・textConversionWriter関数にtextとmaxCountを引数として渡して実行します。

textConversionWriter関数

今回のメインとなる関数です。setTimeoutメソッドを使って繰り返し実行するようにしています。実行間隔は定数waitで指定します。

①：変数nowTextにp要素内の現在のテキストを代入します。

②：countがmaxCount未満の場合、変数nextTextに次に表示する文字を代入します。nextTextが特定の数字だった場合、nowTextを置き換えてnextTextを空にします。

③：nowTextにnextTextを連結したものを表示し、countを加算します。countの値がmaxCountと等しい場合はループのためにcountを0にします。

④：全文字表示したらnowTextを空にしてループさせます。

おわりに

ごり押し感があるものの無事動くものが作れました。