时间戳

首页 > 解决方案 > 我可以使用打字多行的 Javascript 吗？

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

问题描述

我想创建一个网页，让它看起来像一台使用“typeWrite”功能启动的旧计算机，并在段落后添加一个“_”。文本将多行写入一个 div（如“检查 RAM....OK”“检查 CD-ROM....OK”等）。我不能让字符串转到下一行。我已经尝试
和\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>

标签： javascripthtmlcss

解决方案

这是因为 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>

推荐阅读