我可以使用打字多行的 Javascript 吗？

Question

我想创建一个网页，使其看起来像使用“typeWrite”功能启动的旧计算机，并在段落后添加“_”。 文本将多行写入一个 div（如“检查 RAM....确定”“检查 CD-ROM....确定”等）。 我不能让字符串转到下一行。 我试过了
和\\n，我试图拆分字符串并用\\n 连接它。 我试图在我希望行结束的地方加上反斜杠 () .. 没有成功。 有任何想法吗？？

var i = 0;
var txt = 'First line, second line, third line, and more';
var speed = 150;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}


<button onclick="typeWriter()">Click me</button>

<div class="typewriter">
<p id="demo" class="text"></p><span>_</span>
</div>

Answer 1

这是因为 HTML 通常不尊重空格。 您可以尝试使用中断标签 ( <br> )，但由于您的文本是生成的，您也可以只更改段落的样式。 如果添加white-space: pre它将尊重\\n字符。

 var i = 0; var txt = 'First line,\\nsecond line,\\nthird line,\\nand more'; var speed = 50; function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } }

 #demo { white-space: pre; }

 <button onclick="typeWriter()">Click me</button> <div class="typewriter"> <p id="demo" class="text"></p><span>_</span> </div>

Answer 2

在 css 中为下划线添加一个 after 标签

 var i = 0; var txt = 'First line\\nsecond line\\nthird line, and more\\nFirst line\\nsecond line\\nthird line, and more\\nFirst line\\nsecond line\\nthird line, and more\\n'; var speed = 50; let demo = document.getElementById("demo"); let typewriter = document.getElementsByClassName("typewriter")[0]; function typeWriter() { demo.classList.add("writing"); if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); typewriter.scrollTop = typewriter.scrollHeight; i++; setTimeout(typeWriter, speed); }else{ demo.classList.remove("writing"); } }

 @keyframes blinking { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } body{ margin:0; } .typewriter{ width:100vw; font-family:Consolas; height:30vh; overflow-y:scroll; background:black; color:white; padding:10px; margin-bottom:10px; } button{ margin-left:10px; border:none; background:#DDD; height:35px; width:70px; } #demo{ white-space: pre; margin:0; } #demo::after{ content: '_'; animation:1s blinking infinite step-end; } #demo.writing::after{ animation:none; }

 <div class="typewriter"> <p id="demo" class="text"></p> </div> <button onclick="typeWriter()">Click me</button>