JavaScript:テキストフォームスクローラー 200205.02

何を今更自作しているんだ、の、JavaScriptによるスクローラーです。
メッセージは好きに変えられますが、1バイトと2バイトが混在すると文字化けする場合があるそうな(未確認)。

JavaScriptは、変更可能箇所はで表示します。


  1. まず、HTMLの<head>〜</head>内に、以下のスクリプトを書きます。コピー&ペーストしてしまって構いません。
    スクロール速度の数値を小さくすると、スピードが速くなります。初期値の500、又は400くらいがいいでしょう。
    <script type="text/javascript">
    <!--
    var ScrollSpeed = 500; //スクロール速度
    var DispMsg = ""; //表示メッセージ
    
    //bodyから呼び出すScript
    function MsgScroll(OriginalMsg, TextboxSize) {
        //テキストボックス幅を基準に空白数を算出。ただし実際の空白幅は環境依存
        var Blanks = " ";
        for (i = 0; (TextboxSize / 2) > i ; i++){
            Blanks = Blanks + " ";
        }
        DispMsg = Blanks + OriginalMsg;
    
        //スクロールを実行する
        DispScroll();
    }
    
    //スクロール実行本体
    function DispScroll() {
        DispMsg = DispMsg.substring(2,DispMsg.length) + DispMsg.substring(0,2);
        document.MsgForm.MsgTxt.value = DispMsg;
        ScrollTimer = setTimeout("DispScroll()",ScrollSpeed);
    }
    
    //-->
    </script>

  2. 本文のHTMLソースをだーっと書いて、スクローラーを貼りたい部分に来たらこう書きます。コピー&ペーストした後、赤字部分を直しましょう。
    テキストフォームそのものをScriptで書いているのは、ずばり趣味です(^^;)JavaScript未対応環境の場合、テキストフォーム自体が表示されません。
    必要な場合、noscript要素を使って、同様のメッセージを表示するのが親切ってもんです。

    <script type="text/javascript">
    <!--
        document.writeln('<form name="MsgForm">');
        document.writeln('<input type=text name="MsgTxt" size="40">'); //数字はテキストボックス幅
    
        document.writeln('<input type=button name="ScrollStop" value="" onClick="clearTimeout(ScrollTimer);">'); //停止ボタン
        document.writeln('<input type=button name="ScrollStart" value="" onClick="location.reload();">'); //再生ボタン(ページのリロード)
    
        document.writeln('<' + '/form>');
    
        MsgScroll("これがメッセージ。停止と再生のボタンを付けてみました。",40); //数字はテキストボックス幅
    //-->
    </script>

  3. 外部JavaScriptファイルを使いたい場合は、スクリプトのうちで<!--//-->に囲まれた部分をテキストファイルに書き出し、適宜アップロードします(ファイル名例:"msgscrollform.js")。
    このとき、HTMLソース内にスクリプトを書く必要はありません(書かないための外部ファイルです(^^))。
    そして前項と同じく、HTMLソースをだーっと書いて、スクローラーを貼りたい部分に来たらこう書きます。

    <script type="text/javascript" src="msgscrollform.js"></script>

実行するとこうなります。