-1

如何通过按回车在网页上显示文本可能在 javascript/jquery 中？

我希望如果有人打开页面并按 Enter 键，那么文本开始逐行出现，就像我们通过终端在 linux 上安装某些东西时那样，文本逐行显示，告诉我发生了什么我想要那种类型的动画？在具有静态/纯文本行的网页上

谢谢

这不是进度条我想要像终端一样的简单动画，其中每一行平面文本一个接一个地出现

例如，我打开了网页，然后按 Enter 键，文本开始显示为终端。逐行

示例代码

<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 回答