PHPでの質問です。


 ものすごく初歩的な事かと思いますが、単純に1秒おきにHTML上に文字を追加して表示したいと思っております。

 1秒後 1
 2秒後 1 2
 3秒後 1 2 3
 4秒後 1 2 3 4

 このような感じで表示したいのですが単純に

 echo "1";
 sleep(1);
 echo "2";
 sleep(1);
 echo "3";
 sleep(1);
 echo "4";

 としても4秒後にまとめて「1234」と表示されるだけです。
当たり前といえば当たり前なんですが、HTML上に1秒おきに表示を行うにはどのようにすればよいでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2008/07/26 19:51:02
  • 終了:2008/08/02 19:55:02

回答(2件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/07/26 20:10:15

ポイント35pt
echo "1";
ob_flush();
flush();

sleep(1);
echo "2";
ob_flush();
flush();

sleep(1);
echo "3";
ob_flush();
flush();

sleep(1);
echo "4";

こんな感じでいけそうな気もしますが、どっちかというと JavaScript でやるべきことのような気もします。

id:quocard

ありがとうございます。

こちらの方法でうまくいきましたが、tableタグの中に入れると何故かまとめてじゃないと出てこないようです。

tableタグの終了までを1つとしてみている為処理が終わるまでは出てこないということでしょうか。

JavaScriptは今まで触る機会がなかったのでこれを機に調べてみるのもよいかもしれません。

2008/07/26 20:37:36
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012008/07/26 21:56:54

ポイント35pt

javascriptならば下記のような感じになります

一時停止(sleep)に該当するものはないので

一定時間後にサブルーチンを呼び出す(setTimeout)を用います。

もちろんブラウザがjavascriptの動作を許可していないと動きませんし

ブラウザによって多少書き方が異なります。(下記の動作確認はIE6のみです)

<html>
<head>
  <script language="JavaScript">
  <!--
    var tNumber = 5;
    var tArray = new Array(tNumber);
    tArray[0] = "あ";
    tArray[1] = "い";
    tArray[2] = "う";
    tArray[3] = "え";
    tArray[4] = "お";
    var tCount = 1;
    function Timer1(){
     document.getElementById('TD1').innerText
      = document.getElementById('TD1').innerText + tArray[tCount];
      tCount++;
      if(tCount < tNumber) {
        setTimeout("Timer1()",1000);
      }
    }
  //-->
  </script>
</head>
<body onLoad='javascript:setTimeout("Timer1()",1000)'>
  <table border="1" width="100%">
  <caption>'あ'から'お'まで1秒毎に1行追加されていくテスト</caption>
  <tr><td id="TD1">あ</td></tr>
  </table>
</body>
</html>
|<
  • id:GoldenDawn
    table 全体が読み込まれないと表示されないのはブラウザ側の仕様でしょう。
    なお、試してみたところ safari では table なしでも全体を読み込んでから表示されました。
  • id:kn1967
    誤記 1秒毎に1行追加されていくテスト
    訂正 1秒毎に1文字追加されていくテスト

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません