WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:タイプライタの最新の行に自動でスクロールしたい。

0:[投稿] RRX [2006/12/24 03:38 ] [環境:IE7.05730.11 Microsoft Windows XP Home Edition Version 2002 Service Pack 2 わからない]

タイプライタのように1文字づつ表示していく場合、ウィンドウ内最後の行に移動したら、その行に1行分スクロールするようにしたいのですが。
わかりやすくたとえますと、コマンドラインでコマンドを実行した時のようなスクロールの動きにしたいのです。

年末でお忙しいところのお願いで申し訳ないのですが、
もしよろしければ、協力してくださらないでしょうか。よろしくお願いします。m(__)m


1:[回答] koike [2006/12/24 10:47 ]

とりあえず。
http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_105.html


2:[回答] RRX [2006/12/24 11:30 ]

回答ありがとうございます。m(__)m
このサイトの「タイプライタ」ですと、うちの環境では改行にラグが発生し、
$が表示されたままになってしまうので、違うやつを使っています。ちなみに、これはタイプ文字が画面がいに行っても

スクロールしないようなのですが…

>わかりやすくたとえますと、コマンドラインでコマンドを実行した時のようなスクロールの動きにしたいのです。
に追加ですが、アクセサリのコマンドプロンプトを開いて、
help
と入力してエンターキーを押してもらえますと、どういった感じかお分かりいただけると思います。

それでは、引き続き皆様からの情報をお待ちしております。m(__)m


3:[回答] ティルド [2006/12/27 10:47 ]

<html><head><title>スクロール</title>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript;">
</head>
<body>
<script type="text/javascript">
    var i = 0;
    var str =    "こんな感じでしょうか。!"
        +    "まず、Click to startというリンクがクリックされると、!"
        +    "「loop();」というJavaScriptが実行されます。!"
        +    "なぜそうなるかというと、「onClick」属性が設定してあるからです。!"
        +    "onClickというのは、クリックされるときに実行されます。!"
        +    "そして、「loop();」によって、function loop()というところへ飛びます。!"
        +    "「function 関数名() { 実行したい処理; }」のようにすると、!"
        +    "関数を定義することができます。!"
        +    "また、「関数名();」と書くことで、「実行したい処理」が実行されます。!"
        +    "次にif文を使って条件分岐(・・・ってそこまで言わなくてもいいですよね。)!"
        +    "これだけ書いてもまだ11行とかなかなかめんどい・・・。!"
        +    "ちなみに、半角の!マークは、改行を意味します。!"
        +    "(この文においてのみ。)!"
        +    "まぁ必要なところだけ説明します。(これからは)!"
        +    "str.charAt(i)というのは、「strのi文字目を抜き出す」という意味です。!"
        +    "たとえば、str=\"あいうえお\"の時にstr.charAt(1)を実行すると、「" + ("あいうえお".charAt(1)) + "」になります。!"
        +    "これを利用して、半角の!マークがあった時にbrを挿入しているわけです。!"
        +    "変数.replaceというので、半角の!マークを改行に変えています。!"
        +    "なぜ/!/と書いているのかというと、正規表現と呼ばれるものだからです。!"
        +    "といっても私も正規表現は簡単なことしかわからないので、!"
        +    "ご自分でお調べください。!"
        +    "ちなみに、改行があったとき(!マークがあったとき)にscrollBy(0,100)ってのを実行しています。!"
        +    "よく覚えてないんですが、とりあえずそれで最下部に移動できます。!"
        +    "そんで、str.substr(0 , i)というところでは、strの文字を最初からi文字のところまで抜き出します。!"
        +    "例えばstr=\"あいうえお\"のときに、str.substr(0 , 1)を実行すると、「" + ("あいうえお".substr(0 , 1)) + "」が返ってきます。!"
        +    "(ってinnerHTMLの説明わすれとった・・・)!"
        +    "(ってかもう時間ないです・・・)!"
        +    "(っていうことで・・・)!";
    for(var j = 0; j < 30; j++) str += "Sample text.<br>";
    str +=        "最後のほう手抜きですみません。(ぉぃ)!"
        +    "ちなみに、onClickのところの話ですが・・・!"
        +    "(i == 0) ? loop() : alert('既に押されています。');ってなっていると思います。!"
        +    "これは、if (i == 0) loop(); else alert('略');と同じ意味です。!"
        +    "このように書くとスマートなんで個人的に好きです。!"
        +    "けど本当は、X = (flag) ? 90 : 10;という感じで使うのかもしれません。!"
        +    "他のスクリプトはかなり簡単に作ったつもりですので、わかると思います。!";
        +    "もしわからなかったらご自分でお調べくださいー。!";

    var speed = 20;
function loop() {
    if (i++ < str.length){
        scrollBy(0,100);
        if(str.charAt(i) == "!"){
            str = str.replace(/!/ , "<br>"); i += 4;
        }
        document.getElementById("print").innerHTML = str.substr(0 , i);
        setTimeout("loop();", speed);
    }
}
</script>
<a href="#" onClick="(i == 0) ? loop() : alert('既に押されています。');">Click to start</a><br><br>
<div id='print'></div></body></html>

説明はこの中に書いています。
長ったらしく書いてるのですが、結局のところ
scrollBy(0,100);
を使えばいいわけです。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]