JavaScriptを使ってテキストを一文字ずつ表示させる方法

JavaScriptを使ってテキストを一文字ずつ表示させる方法

JavaScriptを使ってテキストを一文字ずつ表示させる方法

JavaScriptを使って、指定したテキストを一文字ずつ表示していく方法をご紹介いたします。

動きについては、以下デモページをご参照ください。

デモページを見る

JavaScriptを使ってテキストを一文字ずつ表示させる方法

まずは文字を表示させる領域をHTMLで記述します。


<body onload="printMoji()">
<div id="text"></div>

body要素に「onload=”printMoji()”」を追加しておき、ページ表示時にスクリプトを読み込みます。

スクリプトは以下のようになります。

<script>
var i=0;
var printString;
var moji="一文字ずつ表示しますよ~一文字ずつ表示しますよ~";

function printMoji() {
 document.getElementById("text").innerText=moji.substring(0,i++);
 if(i<=moji.length) {
  setTimeout("printMoji()",300);
 }
}
</script>

mojiに表示するテキストを入れ、getElementByIdで表示領域のIDを指定します。

表示する速度を調整したい時は、setTimeoutの数字を変更してください。数字が大きいほど遅くなります。

あとがき

一文字ずつ表示することで、タイプライターで文字を入力しているような表現ができますね。

ちょっと変わったテキストの表示をしたい時はぜひ!参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です