☆メインコンテンツ
 
ID : Pass : ID:Passを記憶 |パスワード紛失新規登録!|
トップページ  >  パソコン勉強会  >  文字スクロールのソースの勉強

[パソコン勉強会] トピック

2011-05-07 15:01:09

文字スクロールのソースの勉強
saisai
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
<!--
var msg="みなさん、JavaScriptはどうですか。最初は混乱しがちですが、簡単なものから繰り返し利用し、たくさん並んだスクリプトにも怯まないようにがんばっていきましょう。**********";

function scrollmsg(){
document.msgform.text1.value=msg;
msg=msg.substring(3,msg.length) + msg.substring(0,3);
timerID=setTimeout("scrollmsg()",500);
}

//-->
</script>
</head>

<body onLoad="scrollmsg();">
<form name="msgform">
<input type="text" name="text1" size="100"></form>
</body>
</html>


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
サンプルプログラムになります。あまりよくわかりませんが、解説していこうと思います。

コメント
| 1 |
4件中 1-4件を表示

2011-05-07 15:04:21

1: saisai
まず、上から6行目

これは、変数msgに、文字列を代入してます。

2011-05-07 15:52:19

2: saisai
次に関数の定義をしています。

function scrollmsg(){
document.msgform.text1.value=msg;
msg=msg.substring(3,msg.length) + msg.substring(0,3);
timerID=setTimeout("scrollmsg()",500);
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

scrollmsg
関数名


document.msgform.text1.value=msg;
bodyタグ内のformのnameとテキストフィールドのnameを記述し、文字列を書き出す領域を指定。


msg=msg.substring(3,msg.length) + msg.substring(0,3);
substringは、Stringオブジェクトのメソッドです。引数で指定した
文字列を抜き出します。

文字列の開始位置は、4文字目から3文字ずつ 終了位置はmsg.lengthで文字列の最後までになります。


+ msg.substring(0,3);
文字列の3文字を文字列の最後に追加していく。


setTimeout("scrollmsg()",500);

・scrollmsgは関数 上段のscrollmsg関数の括弧の中に再度、同じ関数scrollmsgが呼び出されている状態を 再起呼び出しやrecursive callと言う。 

 この処理をscrollmsg()内で、自身の関数をsetTimeout()を利用して呼び出すことにより、指定時間500ミリ秒ごとに処理を繰り返し行い、文字がスクロールするかのように見せている。


<body onLoad="scrollmsg();">

関数scrollmsg()をbodyタグでイベントハンドラonLoadで呼び出す。


<form name="msgform">
 
 formには、名前を付けておく。(書き出す領域の指定で使う。上から9行目)

 
<input type="text" name="text1" size="100"></form>
 
 nameには、名前をつけておく。(9行目・書き出す領域の指定で使用)

2011-05-07 15:46:52

3: saisai
文字スクロールのサンプルコードになります。

 ブラウザ上で、メッセージをスクロールしているように処理します。IEの<marpuee>タグで簡単にスクロールさせる事はできますが、古いNNでは動作しませんので、通常は利用せずにJSで行います。


<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
<!--
msg="みなさんJavaScriptはどうですか。最初は混乱しがちですが、簡単なものから繰り返し利用し、たくさん並んだスクリプトにも怯まないようにがんばっていきましょう。**********";

function scrollmsg(){
document.msgform.text1.value=msg;
msg=msg.substring(1,msg.length)+msg.substring(0,1);
timerID=setTimeout("scrollmsg()",500);
}


//下は、msgform2用の関数です

msg2="こちらはスタイルシートをテキストのフィールドに適用しています。実際にはHTMLドキュメント上で利用できる様々な要素を組み合わせて、デザインを行っていきます。";

function scrollmsg2(){
document.msgform.text2.value=msg2;
msg2=msg2.substring(1,msg2.length)+msg2.substring(0,1);
timerID=setTimeout("scrollmsg2()",100);
}
//-->
</script>

<STYLE type="text/css">
<!--
.form{border-style:solid;
border-width:10pt;
border-color:#000000;
padding:2;
background-color : #000000;
font-size : 10pt;
color : #55bb55;}
//-->
</STYLE>

</head>

<body onLoad="scrollmsg(),scrollmsg2();">

<marquee>タグを利用してみます<br>
新しいNNでは動作しますが、このタグは古いNNでは動作しません<br>
<marquee width="500" bgcolor="#cccccc">文字がスクロールします</marquee><br><br>

<hr>
<br>
JavaScriptでスクロールさせます。文字を送る速さは500ミリ秒です<br>
<form name="msgform">
<input type="text" name="text1" size="100"><br><br>

<hr>
<br>
テキストのフィールドにスタイルシートを適用して、JavaScriptでスクロールさせます。文字を送る速さは100ミリ秒です<br>

<input type="text" name="text2" size="100" class="form"></form><br>

</body>
</html>

2011-05-07 15:53:30

4: saisai
こんな感じで今回は、完結しました。

happy01
| 1 |
4件中 1-4件を表示




スポンサードリンク
スポンサードリンク
オンライン状況
9 人のユーザが現在オンラインです。 (2 人のユーザが 仲間・サークル を参照しています。)

登録ユーザ: 0
ゲスト: 9

もっと...
アクセスカウンタ
今日 : 920920920
昨日 : 1460146014601460
今週 : 7488748874887488
今月 : 5244752447524475244752447
総計 : 2308907230890723089072308907230890723089072308907
平均 : 1290129012901290