<head>
<script language="JavaScript">
<!--
var msg,msgh,i=0,t=120,len;//まず、変数の宣言
//変数msgに文字列を代入。
msg = "今回は、このように一文字ずつ文字が表れてくる方法です。 \nページを読み込むと、この文が一文字ずつ表れてきます。 \nでは、これのソースから。";
//msgに代入した文字列の文字の数調べて、lenにその数を代入。
len = msg.length;
function hyouji() {
msgh = msg.slice(0,i);
document.all.message.innerText = msgh;
i++;
timerID=setTimeout("hyouji()", t);
if (i>len){
clearTimeout(timerID);
}
}
//-->
</script>
</head>
<body onLoad=" hyouji()">
<div id=" message"></div>
</body>
|
今回は、わりと短いソースですねぇ。
いやいや、結構、結構o(*^▽^*)o~♪
それでは、まずＪＡＶＡスクリプトから！
変数の宣言の後、変数ｍｓｇに表示したい文字列を代入しています。
\nというのは、そこで改行する働きをします。
そして、
len = msg.length;
"文字列".lengthは、その文字列の文字数を表しています。
ま、自分で文字の数を数えても良いのですが、ＪＡＶＡスクリプトにはこのように文字の数を数えてくれる機能がありますので、それを利用しています。
こうしておくと、ｍｓｇに好きな文章（文字列）をいれると、その数を正しく数えてくれます。
そして、関数
hyouji()です。
簡単にその中身を説明しましょう。
ｍｓｇには文字列が入っています。
まず、この関数の１回目では、この文字列の先頭の１文字だけを表示します。
そして、２回目は、先頭から２文字を・・３回目は先頭から３文字を・・
と言うふうに表示する文字数を増やして言っています。
<div id="message"></div>・・・このタグに囲まれた中に、最初文字は入っていませんが、
１回目、
<div id="message">今</div>
２回目、
<div id="message">今回</div>
３回目、
<div id="message">今回は</div>
と言う具合に文字を変更して行ってます。
つまり、このタグに囲まれる部分を変更しています。
そして、関数が繰り返されるたびに一文字ずつ増えていきます。
◆
ｍｓｇの先頭からいくつかの文字数だけ取り出すのは、
msgh = msg.slice(0,i);が行っています。
"文字列".slice(□文字目から,△文字目まで)
と言うふうに抜き出す部分の初めと終わりを数値で指定します。
ここで、先頭の文字は１番目とはせず、０番目という指定のしかたになります。
つまり１番目と指定すると、実際は２番目を指定したことになりますから注意が必要です。
抜き出す部分の終わりの文字、つまり△文字目の数値は、ｉという変数を使っています。
ｉは、関数が１回目の時は、最初の変数の宣言の部分にあるように、数値の０です。（ソースを見てください）
そして、この関数が繰り返されるたびに、ｉ＋＋によって、１ずつ増えていきます。
と言うわけで、変数ｍｓｇｈには、ｍｓｇに入っている文字列から、先頭（０番目）〜ｉ番目の文字が、関数を繰り返すたびに代入されます。
その上で、そのｍｓｇｈを、
document.all.message.innerText = msgh;
で、表示させます。
（参照）
messageというＩＤがつけられたタグに囲まれるべき文字列を、変数ｍｓｇｈに代入されている文字列とします。
そして、後はこの関数を繰り返す処理です。
timerID=setTimeout("hyouji()", t);
if (i>len){
clearTimeout(timerID);
}
ｉ（繰り返した回数）がｌｅｎ（変数ｍｓｇには言っている文字列の文字数）より大きくなると、繰り返しが止まります。つまり、ｍｓｇに代入したすべての文字が表示し終えると止まります。
ちなみにｔは変数を宣言するところで１２０と決めました。
だから１０００分の１２０秒後に、この関数を繰り返します。
◆
ところで、今回はこのページが表示されると、自動的に
hyouji()が始まります。
それは、ｂｏｄｙタグに
onLoad="hyouji()"と書くことで、そのように出来ます。
このページを読み込むと
hyouji()を実行するという意味です。
<body onLoad="hyouji()">
タイマーのところ
timerID=setTimeout("hyouji()", t);
のｔは、
１０００分の何秒後に指定した関数を実行するかを指定しますが、今回はあえて変数を使いました。
ここを変数にしておくと、次のような応用が出来ます。
ここをクリックすると？
これについては、ソースだけ書いておきます。
基本的にはこのページで最初に紹介したものと同じですが、どこを改良したか見比べてみてください。
<head>
<script language="JavaScript">
<!--
var len2,msg2;
var endmsg;
msg2 = "タイマーの ｔ を変化させることで、文字の現れ方が変わります。\n文章の区切りの部分では、文字の表示が１度止まったように感じます。\nその部分だけ ｔ の値を長めにしているからです。";
len2 = msg2.length;
function hyouji2() {
msgh = msg2.slice(0,i+1);
document.all.message2.innerText = msgh;
//この部分で最後の文字が"、"または"。"の時に、ｔの値を変えています。
endmsg = msg2.slice(i,i+1);
if ((endmsg=="、")||(endmsg == "。")){
t=800;
} else{
t=80;
}
i++;
timerID=setTimeout("hyouji2()", t);
if (i>len2){
clearTimeout(timerID);
}
}
//-->
</script>
</head>
<body>
<div id="message2"></div>
<div align="center" onClick="i=0;t=80;hyouji2();" style="font-weight:bold;text-decoration:underline;color:crimson;cursor:hand">ここをクリックすると？</div>
</body>
|