我还应该从动画代码中 add/deduce 什么？

Question

又是一个关于JS动画的问题/CSS.

请问JavaScript中的代码应该如何修改才能达到满屏乱码后所有乱码行消失的视觉效果，只有黑色背景，而新的一行随机字符开始在屏幕顶部生成？我想这样的解决方法是，在div元素中的字符填满整个屏幕后，高度可以作为参考触发.removeChild()的功能，以去除附加的p元素。之后，通过 .appendChild() 它将在屏幕顶部再次开始生成过程。如果不行，还有其他方法吗？

非常感谢！

代码：

function create_random_string(string_length) {
  var random_string = '';
  var characters = 'ABCDEFGabcdefg';

  for (var i, i = 0; i < string_length; i++) {
    random_string += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string;
}

let divElem = document.getElementById('container');
NewLine();

var MyInterval = setInterval(NewLine, 11000);

function NewLine() {
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15);
  divElem.appendChild(text);
}

function RemoveChild() {
  if (divElem.clientHeight > window.innerHeight) {
    while (divElem.firstChild) {
      divElem.removeChild(divElem.firstChild)
    };
  }
}

body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  height: 100vh;
  width: 100vw;
}

#container {
  place-content: center;
  text-align: center;
  line-height: 7.5vh;
}

#text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vw;
  letter-spacing: 3vw;
  font-weight: bold;
  color: #ffffff;
  position: relative;
}

#text::before,
#text::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#text::before {
  background: #000000;
  animation: typewriter 10s steps(15) forwards;
}

#text::after {
  width: 0.125em;
  bottom: 0vh;
  Top: 0vh;
  background: #ffffff;
  animation: TypingBar 10s steps(15) forwards, blink 750ms steps(15) infinite;
}

@keyframes typewriter {
  0% {
    left: 0;
  }
  6.7% {
    left: 7vw;
  }
  100% {
    left: 90vw;
  }
}

@keyframes TypingBar {
  0%,
  6.7% {
    left: 8vw;
  }
  99.99% {
    left: 89.5vw;
    opacity: 1;
  }
  /* escape fade-in effect */
  100% {
    opacity: 0;
  }
  /* hide trailing cursor */
}

@keyframes blink {
  to {
    background: transparent;
  }
}

<body>
  <div id="container">
    <p id="text"></p>
  </div>
</body>

Answer 1

function create_random_string(string_length) {
  var random_string = '';
  var characters = 'ABCDEFGabcdefg';

  for (var i, i = 0; i < string_length; i++) {
    random_string += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string;
}

let divElem = document.getElementById('container');
NewLine();

var MyInterval = setInterval(NewLine, 11000);

function NewLine() {
  RemoveChild();
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15);
  divElem.appendChild(text);
}

function RemoveChild() {
  if (divElem.clientHeight > window.innerHeight) {
    divElem.innerHTML ="";
  }
}

body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  height: 100vh;
  width: 100vw;
}

#container {
  place-content: center;
  text-align: center;
  line-height: 7.5vh;
}

#text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vw;
  letter-spacing: 3vw;
  font-weight: bold;
  color: #ffffff;
  position: relative;
}

#text::before,
#text::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#text::before {
  background: #000000;
  animation: typewriter 10s steps(15) forwards;
}

#text::after {
  width: 0.125em;
  bottom: 0vh;
  Top: 0vh;
  background: #ffffff;
  animation: TypingBar 10s steps(15) forwards, blink 750ms steps(15) infinite;
}

@keyframes typewriter {
  0% {
    left: 0;
  }
  6.7% {
    left: 7vw;
  }
  100% {
    left: 90vw;
  }
}

@keyframes TypingBar {
  0%,
  6.7% {
    left: 8vw;
  }
  99.99% {
    left: 89.5vw;
    opacity: 1;
  }
  /* escape fade-in effect */
  100% {
    opacity: 0;
  }
  /* hide trailing cursor */
}

@keyframes blink {
  to {
    background: transparent;
  }
}

<body>
  <div id="container">
    <p id="text"></p>
  </div>
</body>

我还应该从动画代码中 add/deduce 什么？

What else should I add/deduce from the code of animation?

html

javascript

css

css-animations