一行テキストボックスの文字をスクロールさせよう
表示の例
 テキストボックスの中の文字が流れていきます。
プログラムAのソースをコピーして、テキストボックスを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<FORM name="f_scroll">
<INPUT name="t_scroll" size="35">
</FORM>
テキストボックスのよこの大きさをかえる場合は、size="35" の 35 をかえてください。
プログラムBのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムBのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
msg0="                        ";
msg1="ようこそ「5・6年生にもわかるやさしいJavaScript」へ!"; 
msg2="このサイトでは「JavaScript」をやさしく解説しています。";
msg3="お気に入りのメニューをあなたのページで使ってみてくださいね。";
msg=msg0+msg1+msg0+msg2+msg0+msg3;
function scroll_msg(){
msg=msg.substring(2,msg.length)+msg.substring(0,2);
document.f_scroll.t_scroll.value=msg;
setTimeout("scroll_msg()",300);
}
//-->
</SCRIPT>
プログラムBのソースの上から4行目〜6行目に、スクロールして表示されるコメントが書いてあります。msg1="ようこそ「5・6年生にもわかるやさしいJavaScript」へ!"; などの ようこそ「5・6年生にもわかるやさしいJavaScript」へ! をあなたの表示させたいコメントにかえてください。
下から4行目の setTimeout("scroll_msg()",300); の 300 がスクロールするスピードです。数字が大きいほどおそくなっていきますから、あなたのお好みにかえてください。
プログラムCのソースをコピーして、HTMLソースの<body の y のすぐうしろに半角スペースをひとつ入力してから貼り付けしましょう。
プログラムCのソース
onload="scroll_msg()"
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ