Index

HOME > プログラムTOP > JavaScript


流れる文字列

　JavaScript の実用的な Tips です。このページでは、文字列に関するTIPSを扱います。ステータスバーやテキストボックスなど、文字列を時間に合わせて移動させるサンプルを掲載しています。
[INDEX] ・ステータスバーに流す　::　ステータスバーの文字列を移動させる
・タイトルバーに流す　::　タイトルバーの文字列を移動させる
・テキストボックスに流す　::　文字列をテキストボックスの中で移動させる
・ページ上に流す　::　文字列をページ上で移動させる
[ 参考ページ : 変化する文字 : 拡大・縮小 / フェードイン・フェードアウト / 点滅 ]

sasaraan programming

Exposition

■ステータスバーに流す

　ステータスバーに文字列を流すサンプルです。ただし、ステータスバーは、本来、読み込み状況やリンク先の確認などのために重要な情報を表示する場所ですので、極力は他サイトへのリンクがない軽快なページに限るべきでしょう。 
// JavaScriptソース
var strMessage = "　　　　文字を流すテスト中です。　　　　";
var nInterval = 300;　　// 変化させる間隔（単位 : ミリ秒）

function SetFlowStatus() 
{
      strMessage = strMessage.substr(1) + strMessage.substr(0, 1);
      window.status = strMessage;
      setTimeout("SetFlowStatus()", nInterval);
}
<!-- HTMLソース -->
<body onload="SetFlowStatus()">
... 
</body>
str.substr(start [, len])
　・str : Stringオブジェクト / start : 添え字 / len : 文字数
　・添え字startから末尾まで（または長さlen）の文字列を取得する
　・文字列の添え字は 0 から始まる
[wnd.]setTimeout(func, ms)
　・wnd : windowオブジェクト / func : 関数 / ms : ミリ秒（1/1000秒）
　・msミリ秒後に関数funcを実行する単発タイマーを設定する
　上記の例では、表示する文字列 strMessage をステータスバーへ表示しています。関数では、一定時間ごとに、最初の文字を取り出して最後にくっつける動作をさせています。なお、ステータスバーへの表示は window オブジェクトの status プロパティに値を代入します。

■タイトルバーに流す

　タイトルバーに文字列を流すサンプルです。ただし、IEでは問題なく動作しますが、他のブラウザでは、タイトルの設定ができないものもあるようです。 
// JavaScriptソース
var strMessage = "　　　　文字を流すテスト中です。　　　　";
var nInterval = 300;　　// 変化させる間隔（単位 : ミリ秒）

function SetFlowTitle() {
      strMessage = strMessage.substr(1) + strMessage.substr(0, 1);
      document.title = strMessage;
      setTimeout("SetFlowTitle()", nInterval);
}
<!-- HTMLソース -->
<body onload="SetFlowTitle()">
... 
</body>
　表示場所の設定以外は、上の節と同じつくりです。タイトルバーに文字列を設定する時は、document オブジェクトの title プロパティに値を代入します。

■テキストボックスに流す

　テキストボックス（text要素）に文字列を流す例です。 
// JavaScriptソース
var strMessage = "　　　　文字を流すテスト中です。　　　　";
var nInterval = 300;    // 変化させる間隔（単位 : ミリ秒）

function SetFlowText() {
      strMessage = strMessage.substr(1) + strMessage.substr(0, 1);
      document.form1.text1.value = strMessage;
      setTimeout("SetFlowText()", nInterval);
}
<!-- HTMLソース -->
<body onload="SetFlowText()"> 
      <form name="form1">
            <input type="text" name="text1" size="30"/>
      </form>
</body>
　表示場所の設定以外は、上の節と同じつくりです。text 要素に文字列を設定する時は、form 要素の階層構造にしたがって、document オブジェクトから 要素の value プロパティにアクセスします。なお、ここでは name 属性を利用しています。

■ページ上に流す

　文字をページ上で移動させるサンプルです。ここでは、斜めに移動する文字列を考えてみます。以下は、左上から右下の方向（−座標から＋座標）へスライドするケースです。 
// JavaScriptソース
var currX = -30;   // 現在のx座標（値は最初の位置）
var currY = -30;   // 現在のy座標（値は最初の位置）
var destX = 200;   // 静止位置のx座標
var destY = 200;   // 静止位置のy座標
var stepX = 1;      // 一度に動く距離（x方向）
var stepY = 1;      // 一度に動く距離（y方向）
var nSpeed = 20;  // 移動の間隔（ミリ秒単位）
var objChar;        // 動かすオブジェクト

function SetSlideChar(idChar) 
{
      if (!document.getElementById) return;
      objChar = document.getElementById(idChar);
      objChar.style.left = currX + "px";
      objChar.style.top = currY + "px";
      SetTimer();
}

function SetTimer() 
{
      if (currX < destX || currY < destY) {
            currX += stepX;
            currY += stepY;
            if (currX >= destX) currX = destX;
            if (currY >= destY) currY = destY;
            objChar.style.left = currX + "px";
            objChar.style.top = currY + "px";
            setTimeout("SetTimer()", nSpeed);
      }
}
<!-- HTMLソース -->
<body onload="SetSlideChar('cap')">
      <div id="cap" style="position:absolute; font-size:20px; 
                  padding:1ex; background-color:navy; color:white;">
            文字が動いています...<br>止まるまで待ってね！
      </div>
</body>
　HTMLソースで設定した div 要素の文字列を移動させています。ポイントは、styleの position プロパティに "absolute" を指定して絶対座標で位置を設定するようにすることです。そして SetSlideChar 関数を呼び出して文字を移動させます。オブジェクトを特定するために、id 属性の設定が必要です。なお、ここでは、body タグ内の onload イベントに対応させています。
　SetSlideChar 関数では、id 属性値からオブジェクトを特定し、初期位置に配置しています。そしてタイマーを設定する SetTimer 関数へ処理を渡しています。
　SetTimer 関数では、まず、if 文で文字位置が静止位置に達したかどうかを判断しています。達していなければ、stepX 及び stepY の値の分だけ移動させます。この時、それぞれの方向（x, y)で、静止位置を超えた時は、値を静止位置に戻します。 　今度は、右下から左上の方向（＋座標から−座標）へスライドする文字列のサンプルです。 
// JavaScriptソース
var currX = 240;    // 現在のx座標（値は最初の位置）
var currY = 240;    // 現在のy座標（値は最初の位置）
var destX = 0;       // 静止位置のx座標
var destY = 0;       // 静止位置のy座標
var stepX = 1;       // 一度に動く距離（x方向）
var stepY = 1;       // 一度に動く距離（y方向）
var nSpeed = 20;   // 移動の間隔（ミリ秒単位）
var objChar;         // 動かすオブジェクト

function SetSlideChar(idChar) 
{
      if (!document.getElementById) return;
      objChar = document.getElementById(idChar);
      objChar.style.left = currX + "px";
      objChar.style.top = currY + "px";
      SetTimer();
}

function SetTimer() 
{
      if (currX > destX || currY > destY) {
            currX -= stepX;
            currY -= stepY;
            if (currX <= destX) currX = destX;
            if (currY <= destY) currY = destY;
            objChar.style.left = currX + "px";
            objChar.style.top = currY + "px";
            setTimeout("SetTimer()", nSpeed);
      }
}
　SetSlideChar 関数は同じです。SetTimer 関数の違いは、不等号がすべて反対になること。それに、stepX , stepY を前節では足していましたが、今回は引いて次の位置を計算していることです。

www.sasaraan.net

(c) morijoh