文字をスクロールして表示する
ホームページやブログなどのウェブサイトに文字を表示する際に、簡単な JavaScript を使って文字をスクロールさせることができます。
限られたスペースに大量の文章を表示させたい場合に便利です。
このサンプルで使用している JavaScript のメソッドは、下記のようになります。
一定時間ごとに処理を行う(タイマーを指定する)
タイマーを識別する変数=setInterval(実行する関数,指定時間)
タイマーを識別する変数=setInterval(実行する関数,指定時間)
- タイマーを識別する変数：省略可能ですが、タイマーを解除する場合には識別するために変数が必 要です。
- 実行する関数：JavaScriptの関数を指定します。
- 指定時間：ミリ秒(1/1000秒)の指定になります。1秒ごとであれば、1000となります。
文字列の操作
| 文字列.contact(結合する文字列) | 文字列を結合する |
| 文字列.slice(開始位置,終了位置) | 文字列を範囲で抜き出す |
| 文字列.substring(開始位置,終了位置) | 文字列を範囲で抜き出す |
| 文字列.substr(開始位置,文字数) | 文字列を文字数で抜き出す |
- contact：文字列を結合します。
- slice：開始位置 +1 文字目から終了位置までの文字列を範囲で抜き出します。開始位置や終了位置に負数(マイナスの数値)を指定すると、後ろから数えた位置になります。
- substring：開始位置 +1 文字目から終了位置までの文字列を範囲で抜き出します。開始位置や終了位置に負数(マイナスの数値)を指定すると、先頭に戻って抜き出します。
- substr：開始位置 +1 文字目から指定した文字数を抜き出します。
| 文字列.length | 文字列の長さを参照 |
- length：文字列の長さを参照します。『 sample = "こんにちは".length ; 』では、sample に、『5』という値が代入されます。
このサンプルページのソースは次のようになっています。
<SCRIPT LANGUAGE="JavaScript">
<!--
setInterval ( 'scrollmsg_sample()',200 ) ; // 0.2秒後ごとに実行
msgsample="こんにちは。ブログでもだいたい使えるHTMLタグ リファレンス へようこそ。みなさまのブログやホームページをたのしく演出するお手伝いができれば幸いです。 "; // 表示するメッセージ
function scrollmsg_sample() {
</SCRIPT>
<form name="form_sample">
<input type="text" name="text_sample"
style="width:100%;border-width:0;background-color:#EEEEEE;">
</form>
<!--
setInterval ( 'scrollmsg_sample()',200 ) ; // 0.2秒後ごとに実行
msgsample="こんにちは。ブログでもだいたい使えるHTMLタグ リファレンス へようこそ。みなさまのブログやホームページをたのしく演出するお手伝いができれば幸いです。 "; // 表示するメッセージ
function scrollmsg_sample() {
msgsample = msgsample.substring(1,msgsample.length) + msgsample.substring(0,1);
// メッセージの先頭一文字を除いた文字列に、最後の一文字を付加
document.form_sample.text_sample.value = msgsample;
// メッセージをフォームに書き出し
}
//-->// メッセージの先頭一文字を除いた文字列に、最後の一文字を付加
document.form_sample.text_sample.value = msgsample;
// メッセージをフォームに書き出し
}
</SCRIPT>
<form name="form_sample">
<input type="text" name="text_sample"
style="width:100%;border-width:0;background-color:#EEEEEE;">
</form>
このサンプルでは、200ミリ秒 (0.2秒) ごとに メッセージの先頭一文字を除いた文字列に、最後の一文字を付加して、フォームに書き出すという処理を繰返し実行し、文字がスクロールしているように見せています。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス