【JavaScript】テキストを1文字ずつ表示してみる

こんにちは！セミマサです。今回はJavaScriptを使ってタグ内の文字を1文字ずつ表示してみました。

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

デモサイト

今回のデモサイトです。

ソースコード

HTML

<section>
    <div class="text-box">
        <p id="text">今日もwebでセミが鳴く</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 = "";
count = text.length;
const wait = 200;

const textWriter = (_text)=>{
    let nowText = document.getElementById("text").textContent;
    let nextText;
    if(nowText.length < count){
        nextText = _text.charAt(nowText.length);
    }else{
        nowText = "";
        nextText = "";
    }
    document.getElementById("text").textContent = nowText + nextText;
};

setInterval("textWriter(text)",wait);

今回のスクリプトです。

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

・グローバル変数countに定数textの文字数を代入します。

・setInterval関数を用いて、textWriter関数を繰り返し実行します。実行間隔は定数waitで指定します。