Jquery

Question

所以我会尽可能简单明了。我喜欢看电脑内部。

在我的网站上，我希望在页面底部有一个宽框。

在此框中，我希望网站内发生的事情显示为文本。

我了解如何制作 jQuery 事件，例如单击或悬停，吐出一些文本。我不明白的是如何将该文本放入一个有 10 行的框中，并且一旦创建了第 11 行文本，第一行就会滑入空白，被删除。

经过一番寻找，我找到了这个，离目标越来越近了。

var caption = [
"User Entered Site",
"Loading SideBar",
"Code: 01011011",
"Whatever text",
"Whatever text"
];

var i = 0;
setInterval(function() {
$("#message-box").html(caption[i]);
i++;
if (i == caption.length){i=0;}
}, 3 * 1000);

这是我发现的代码的问题。它实际上是为屏幕底部的一系列变化提示而设计的。该文本将覆盖之前编写的文本。

虽然这可能很明显，但我想指出，随着时间的推移，这组示例文本应该出现在这个只读控制台区域中。我试着弄乱 .delay(1000) 无济于事。

我不需要变得复杂，也不需要为出现的文本编写真实事件，相反，我可以只创建虚假事件 - 只是为了让球滚动。我想只要我用 "false" 系列 "hacker-esque" 代码运行编码主要思想，这样... "read-only console," 我就可以解决在我将来创建的新事件（单击、拖动、重新排序等）的一些代码上，伪黑客 box/console 实际上会有一些真实的事件。

我可能只是在其中保留人造的东西，只是为了给这个特殊的艺术 'symbolically back end' 网站带来某种感觉。非常感谢你们！

Answer 1

这里有一些内容可以作为您想要实现的目标的基础。它创建一个框，然后在其中显示随机消息，当列表达到 10 条消息时向上滚动它们（通过删除第一条消息）。我没有尝试设计所有样式，您可以使它看起来更漂亮（并使用动画慢慢移除项目）。我还使用 i 上的计数器限制了它总共显示的消息数量（因此该片段不会永远运行），您可以在您的应用程序中将其删除。

var caption = [
"User Entered Site",
"Loading SideBar",
"Code: 01011011",
"Whatever text",
"Some other message"
];

var i = 0;
var h = setInterval(function() {
  // already 10 messages? if so, delete the earliest
  if ($("#message-box p").length == 10)
    $("#message-box p").first().remove();
  $("#message-box").append('<p>' + i + ': ' + caption[Math.floor(Math.random()*5)] + '</p>');
  i++;
  if (i == 20) clearInterval(h);}
, 1000);

#message-box {
   height: 400px;
   border: 1px solid black;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="message-box"></div>

Jquery - 随着时间的推移动态添加文本 - 'Hacker Box' - 'Console'

Jquery - Dynamically Add Text Over Time - 'Hacker Box' - 'Console'

javascript

console

box