何行かのテキストボックスの文字をスクロールさせよう
表示の例
 テキストボックスの中の文章をスクロールさせます。
プログラムAのソースをコピーして、テキストボックスを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<FORM name="auto">
<TEXTAREA name="automes" rows="5" cols="40" wrap="physical">
</TEXTAREA>
</FORM>
プログラムAのソースの rows="5" の 5 はテキストボックスのたての大きさで、この例では行分の大きさです。
cols="40" の 40 はよこの大きさです。
プログラムBのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムBのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
br = unescape("%0A");
s = navigator.appVersion.charAt(5).toUpperCase();
if(s=="M") br = unescape("%0D");
if(s=="W") br = unescape("%0D")+br;
num = 19;
stf = new Array(num);
stf[0]=br;stf[1]=br;stf[2]=br;stf[3]=br;stf[4]=br;stf[5]=br;
stf[6]="5行分のテキストボックスに、"+br;
stf[7]="メッセージが流れて表示されます。"+br;
stf[8]="かってにスクロールしてくれるので、"+br;
stf[9]="マウスでクリックしなくても見れます。"+br;
stf[10]="あなたの思いつく文章を、"+br;
stf[11]="かっこよく表示させてみてください。"+br;
stf[12]="もちろんスピード調整もできます。"+br;
stf[13]="アイデアを生かして使ってみてください。"+br;
stf[14]=br;stf[15]=br;stf[16]=br;stf[17]=br;stf[18]=br;
cnt = 0; 
timeID = 10; 
function roll(){
str = "";
for (i=0; i<5; i++) str += stf[i+cnt];
document.auto.automes.value = str;
cnt++;
if (cnt>=num-5) cnt=0;
clearTimeout(timeID);
timeID = setTimeout('roll()',1000);
}
//-->
</SCRIPT>
コメントが書いてある部分を、あなたの表示させたいコメントにかえてください。
下から4行目の setTimeout('roll()',1000); の 1000 がスクロールするスピードです。
プログラムCのソースをコピーして、HTMLソースの<body の y のすぐうしろに半角スペースをひとつ入力してから貼り付けしましょう。
プログラムCのソース
onload="roll()"
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ