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

Question

I want to create a web page that makes it look like an old computer booting up using the "typeWrite" function and add an "_" after the paragraph. The text will be multiple lines written into a div (like "Checking RAM.... OK" "Checking CD-ROM....OK" and so on). I can't make the string go to the next line. I have tried
and \\n, and I tried to split the string and join it with \\n. I have tried to put in a backslash () where I want the line to end.. No success. Any ideas??

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

This is because HTML doesn't generally respect whitespace. You could try using break tags ( <br> ), but because your text is generated, you could also probably just change the styling for the paragraph. If you add white-space: pre it will respect \\n characters.

 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

add an after tag in css for the underscore

 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>