TOPページ >  タイマーや日付、日時を扱う > 文字をスクロールして表示する

文字をスクロールして表示する

ホームページやブログなどのウェブサイトに文字を表示する際に、簡単な JavaScript を使って文字をスクロールさせることができます。
限られたスペースに大量の文章を表示させたい場合に便利です。

このサンプルで使用している JavaScript のメソッドは、下記のようになります。

一定時間ごとに処理を行う(タイマーを指定する)
タイマーを識別する変数=setInterval(実行する関数,指定時間)
  1. タイマーを識別する変数:省略可能ですが、タイマーを解除する場合には識別するために変数が必 要です。
  2. 実行する関数:JavaScriptの関数を指定します。
  3. 指定時間:ミリ秒(1/1000秒)の指定になります。1秒ごとであれば、1000となります。
文字列の操作
文字列.contact(結合する文字列)文字列を結合する
文字列.slice(開始位置,終了位置)文字列を範囲で抜き出す
文字列.substring(開始位置,終了位置)文字列を範囲で抜き出す
文字列.substr(開始位置,文字数)文字列を文字数で抜き出す
  1. contact:文字列を結合します。
  2. slice:開始位置 +1 文字目から終了位置までの文字列を範囲で抜き出します。開始位置や終了位置に負数(マイナスの数値)を指定すると、後ろから数えた位置になります。
  3. substring:開始位置 +1 文字目から終了位置までの文字列を範囲で抜き出します。開始位置や終了位置に負数(マイナスの数値)を指定すると、先頭に戻って抜き出します。
  4. substr:開始位置 +1 文字目から指定した文字数を抜き出します。
文字列.length文字列の長さを参照
  1. length:文字列の長さを参照します。『 sample = "こんにちは".length ; 』では、sample に、『5』という値が代入されます。

このサンプルページのソースは次のようになっています。

<SCRIPT LANGUAGE="JavaScript">
<!--
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;
// メッセージをフォームに書き出し
}
//-->
</SCRIPT>
<form name="form_sample">
<input type="text" name="text_sample"
style="width:100%;border-width:0;background-color:#EEEEEE;">
</form>

このサンプルでは、200ミリ秒 (0.2秒) ごとに メッセージの先頭一文字を除いた文字列に、最後の一文字を付加して、フォームに書き出すという処理を繰返し実行し、文字がスクロールしているように見せています。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
JavaScriptを使って最終更新日を表示する
JavaScriptで文字を点滅させる
JavaScriptを使って現在の時刻を表示する
JavaScriptを使って今日の日付を表示する
JavaScriptを使ってクッキングタイマーを作る
文字をスクロールして表示する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス