-1

Enterキーを押してWebページにテキストを表示する方法はjavascript/jqueryにありますか？

誰かがページを開いてEnterキーを押すと、ターミナルからLinuxに何かをインストールするときのように、テキストが1行ずつ表示され始めます。そのような種類のアニメーションが必要な場合は、テキストが1行ずつ表示されます。静的/プレーンテキスト行のあるWebページ

ありがとう

プログレスバーではありませんプレーンテキストの各行が次々に来るターミナルのような単純なアニメーションが必要です

たとえば、Webページを開いて、Enterキーを押すと、テキストがターミナルのように表示され始めます。1行ずつ

サンプルコード

<html>
<head>

<head>
  <body>
    <h1>PLease press enter</h1>
    <span id="line-1" class="hidden">some text here</span>
    <span id="line-2" class="hidden">some text here</span>
    <span id="line-3" class="hidden">some text here</span>
    <span id="line-4" class="hidden">some text here</span>
    <span id="line-5" class="hidden">some text here</span>
  </body>
</html>

重要な注意 事項jQueryとjavascriptについてはわかりません

編集 私が間違っているところは？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Testn</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

  </head>
  <body>

    <script>
      $(document).bind("keypress", function (e) {
        var t = e.keyCode ? e.keyCode : e.which;
        if (t == 13) {
          if ($("#span1").is(":visible") == false) $("#span1").show();
          else if ($("#span2").is(":visible") == false) $("#span2").show();)
          else if ($("#span3").is(":visible") == false) $("#span3").show();)
          else if ($("#span4").is(":visible") == false) $("#span4").show();)
          else $("#span5").show();)
       }
    </script>
    <span id="span1" >some text here</span>
    <span id="span2">some text here</span>
    <span id="span3" >some text here</span>
    <span id="span4" >some text here</span>
    <span id="span5">some text here</span>

  </body>
</html>
4

1 に答える 1

0

あなたはjqueryを使うことができますon..

jQuery 1.7 の時点で、.on() メソッドは、イベント ハンドラーをドキュメントにアタッチするための推奨メソッドです。

更新しました

$(function(){

  var $span=$('span');
  $span.hide();  // hide all soans in the document 
  var count= 1;
  $(document).on("keyup", function (e) {
   if (e.keyCode == 13) {
    if(count <= $span.length){
      $('#'+count).show();
      count++;
    }
  }
  });
});

ここでフィドル

于 2013-03-04T09:50:17.373 に答える