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

スポンサーリンク
1文字ずつ表示して変換アイキャッチ プログラミング

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

以前の記事はこちら

デモサイト

今回のデモサイトです。

ソースコード

HTML

今回のHTMLです。

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

CSS

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

JavaScript

今回のスクリプトです。

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

・定数maxCounttextの文字数を代入します。

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

textConversionWriter関数にtextmaxCountを引数として渡して実行します。

textConversionWriter関数

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

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

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

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

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

おわりに

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

タイトルとURLをコピーしました