我可以使用打字多行的 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>