Jquery - динамически добавлять текст с течением времени - «Хакер Box» - «Консоль» - PullRequest
Новая
       10

Jquery - динамически добавлять текст с течением времени - «Хакер Box» - «Консоль»

0 голосов
/ 29 сентября 2018

Так что я буду максимально понятен и прост.Мне нравится видеть внутри компьютера.

На моем сайте я хочу иметь широкую рамку внизу страницы.

Внутри этой рамки я хотел бы, чтобы внутрисайт должен отображаться как текст.

Я понимаю, как сделать событие 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), но безрезультатно.

Мне не нужно усложнять и писать в реальных событиях для появляющегося текста, вместо этого я могу просто создавать искусственные события - просто чтобы получитьмяч катится.Я полагаю, что пока у меня есть основная идея, закодированная с помощью «ложной» серии «хакерских» кодов, запускающих этот вид… »консоли только для чтения,« я смогу приклеить некоторый код кновое событие, которое я создаю в будущем (щелчок, перетаскивание, изменение порядка и т. д.), и в окне / консоли faux-hacker действительно будут какие-то реальные события.чтобы придать определенный вид этому конкретному художественному веб-сайту с символическим фоном.Большое вам спасибо, ребята!

1 Ответ

0 голосов
/ 29 сентября 2018

Вот кое-что, что может послужить основой для того, чего вы пытаетесь достичь.Он создает поле и затем отображает в нем случайные сообщения, прокручивая их вверх (удаляя первое сообщение), когда список достигает 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>
...