1文字表示

html側

<p id="m1"></p>

js側

$(function(){
gogo();

});

var m_box=new Array();
m_box[0]="メッセージ（1）";
m_box[1]="メッセージ（2）";
m_box[2]="メッセージ（3）";
m_box[3]="メッセージ（4）";
m_box[4]="メッセージ（5）";
var i=0,n=0;

function gogo(){
if(i<=m_box[n].length){
my_message=m_box[n].substring(0,i);
$("#m1").text(my_message);
i++;
setTimeout("gogo()",100);　//1文字を表示させる時間
}else{
i=0;
n++;
setTimeout("gogo()",2000);　//1行を表示させる時間
}

if(n==m_box.length) n=0;　//最初に戻る
}

文字列を改行したい場合は、エスケープ文字（バックスラッシュ）を使います。
 キーボードのバックスラッシュを押しても『￥』にしか表示されない。
『￥』でも問題なし、理由は知らない。

改行→\n　"メッセージ\n（1）"




★jsの解説

jQueryで関数「gogo」を呼び出しています

$(function(){
gogo();

});

表示させる文字を配列「m_box」に入れます。（一行の場合はいらない）

var m_box=new Array();
m_box[0]="メッセージ（1）";
m_box[1]="メッセージ（2）";
m_box[2]="メッセージ（3）";
m_box[3]="メッセージ（4）";
m_box[4]="メッセージ（5）";

変数「i」と「n」に初期値いれます。

var i=0,n=0;

※複数の変数の場合【,】でつなぐ


関数「gogo」について

function gogo(){
if(i<=m_box[n].length){
my_message=m_box[n].substring(0,i);
$("#m1").text(my_message);
i++;
setTimeout("gogo()",100);　//1文字を表示させる時間
}else{
i=0;
n++;
setTimeout("gogo()",2000);　//1行を表示させる時間
}

if(n==m_box.length) n=0;　//最初に戻る
}

setTimeout（"関数名",時間）…一定時間後に繰り返す。設定時間後に関数の呼び出し
※時間は1000→1秒

substring（”開始インデックス”,”最終インデックス”）…指定した文字列を取得
※例えば「いちご」という文字列の場合
い→0
ち→1
ご→2
なので（”0””3”）と指定すると「いちご」※最終インデックスは含まれないので「2」ではなく「3」




上記をふまえて簡単にすると↓↓


もしiが、配列(m_box)【n】番目の文字列の数と同じ、または以下であれば、
 100ミリ秒後に、下記を繰り返す。

 ID(m1)に、配列(m_box)【n】の文字列のi番目を表示させてね

それが終わったらiに+1してね。（文字列が順番に表示されていく）

 iに+1を繰り返し、iが配列(m_box)【n】番目の文字列の数をオーバーしたら

（【n】の文字列の数を超したら）iを0に戻して【n】に+1して、

gogo()してね （また文字列の数をこすまで、iが+1され続ける）

んでもって【n】が配列(m_box)の数と同じになったら、nを0最初にもどしてね



最初に初期値「0」が入ってるので、

配列の【0】メッセージ（1）の文字列の数（文字数8）をこすまで

 substringで指定している一部が表示される。

iには1がプラスされつづける。

8をこしたら次の配列【1】に進む。iはまた0にもどる。

それの繰り返し



●文字列の数を調べたいときはアラートで配列を指定して調べたりする。
●メッセージが一行の場合は配列の部分を削除↓ ※長文の場合、微調整してもチラッとタグが見えちゃうので、 改行したいときは、配列をそのまま使う。

$(function(){
gogo();

});
var m_box=('一行だけのメッセージ、一行だけのメッセージ。');

var i=0

function gogo(){
if(i<=m_box.length){
my_message=m_box.substring(0,i);
$("#m1").text(my_message);
i++;
setTimeout("gogo()",100);
}

if(i==m_box.length) i=0;
}