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

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

以前の記事はこちら

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

デモサイト

今回のデモサイトです。

デモサイトへ

ソースコード

HTML

<section>
    <div class="text-box">
        <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;
  }
}

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);

今回のスクリプトです。

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

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

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

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