Question

如何按Enter键在网页上显示文字可能在javascript / jquery中？

我希望如果有人打开页面然后按回车而不是文本开始逐行显示，就像当我们通过终端在linux上安装一些东西时，文本一行一行地告诉我发生什么样的动画？在具有静态/纯文本行的网页上

由于

它不是进度条我想要像终端这样的简单动画，其中每行平面文字都是一个接一个地来了

例如，我打开了网页，然后按下输入，而不是文本开始显示为终端。逐行

示例代码

<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

EDITED 我哪里错了？

<!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>

Answer 1

你可以使用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++;
    }
  }
  });
});

fiddle here

按Enter键显示文本

1 个答案: