JavaScriptでAuto Text機能を作成しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、「Auto Text機能」をJavaScriptで実装したいと思います。画面上に指定した文字列が自動的に表示される機能です。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

要素の取得

画面操作に必要な要素を取得します。

初期値の設定

初期値も設定しておきます。

テキスト書き込み処理

次は、テキスト書き込み処理を実装しましょう。

毎度お馴染みのsetTimeoutを使って、writeTextを指定時間(speed)毎に実行する処理を書きました。

時間調整処理

「speed」変数の値をいじるとテキストの表示される時間を調整できます。

これで完成です。

おわりに

今回の機能をトップ画面に設置すれば、ディスプレイ広告みたいで面白くなるかもしれませんね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す