colorsプログラミングprogrammingお問い合わせcontact自作ゲーム置き場ゲームプログラミングお問い合わせホームプログラミング【JavaScript】テキストを1文字ずつ表示して途中で変換してみる【JavaScript】テキストを1文字ずつ表示して途中で変換してみるスポンサーリンクプログラミング2019.08.30こんにちは!セミマサです。以前の記事で作成したテキストを1文字ずつ表示するスクリプトを発展させて文字を途中で変換してみました。以前の記事はこちら【JavaScript】テキストを1文字ずつ表示してみるJavaScriptでテキストを1文字ずつ表示してみました。semimasa.com2019.08.24目次デモサイトソースコードHTMLCSSJavaScripttextConversionWriter関数おわりにデモサイト今回のデモサイトです。id="text">きょう1もwebでせみ2がなく3</p></div></section>今回のHTMLです。id:textを付与したp要素の中に文字列を入れておきます。文字列の途中に入っている数字は後述するスクリプトで使います。1rem;}}CSSはこちらです。以前の記事と同様のものになります。0;}else{count++;}setTimeout("textConversionWriter(text,maxCount)",wait);};textConversionWriter(text,maxCount);今回のスクリプトです。・定数textにp要素内のテキストを代入し、p要素内のテキストを空にします。・定数maxCountにtextの文字数を代入します。・グローバル変数countに0を代入します。・textConversionWriter関数にtextとmaxCountを引数として渡して実行します。今回のメインとなる関数です。setTimeoutメソッドを使って繰り返し実行するようにしています。実行間隔は定数waitで指定します。1:変数nowTextにp要素内の現在のテキストを代入します。2:countがmaxCount未満の場合、変数nextTextに次に表示する文字を代入します。nextTextが特定の数字だった場合、nowTextを置き換えてnextTextを空にします。3:nowTextにnextTextを連結したものを表示し、countを加算します。countの値がmaxCountと等しい場合はループのためにcountを0にします。4:全文字表示したらnowTextを空にしてループさせます。おわりにごり押し感があるものの無事動くものが作れました。マサキ今日もwebでセミが鳴く関連記事プログラミング【jQuery/PHP】お問い合わせフォームのセキュリティ対策をするjQueryとPHPで作ったお問い合わせフォームのセキュリティ対策をしてみました。プログラミングphina.jsを使ってシンプルなゲームを作ってみたJavaScriptのゲームライブラリ、phina.jsでシンプルなアクションゲームを作ってみました。プログラミング【JavaScript】ローカルストレージを使ってみるローカルストレージを使ってみました。Codeのインストール手順と日本語化の方法を紹介します。プログラミング【JavaScript】スクロールに連動したアニメーションをつけるJavaScriptを使ってスクロールに連動したアニメーションをつけてみました。マサキなんとなくで生きてきた自分を変えるべく日々努力中のセミです。趣味はゲーム・イラスト制作・プログラミング。なにかありましたらお問い合わせフォームからご連絡ください。マサキなんとなくで生きてきた自分を変えるべく日々努力中のセミです。趣味はゲーム・イラスト制作・プログラミング。なにかありましたらお問い合わせフォームからご連絡ください。書籍紹介スポンサーリンクタイトルとURLをコピーしました。