Question

var i = 0;
var string = "Size: test ";
var speed = 50;

function printtext() {

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

}

<button onclick="printtext()">Click me</button>
<div id="demo"></div>

我正在尝试将“大小：”和“测试”分开。我希望“测试”位于下一行（下），以便单击我的按钮时，它显示（如打字机）信息列表。

结论：我只是想找到一种方法，像某种\ n一样转到下一行。

谢谢

内森

Answer 1

由于分隔Size:和test字符串的唯一内容是空格，因此您只需检查string.charAt(i)是否为空格字符即可。如果是这样，那么您只需打印<br />标记而不是空白字符本身。

var i = 0;
var string = "Size: test "; 
var speed = 50;

function printtext() {

  if (i < string.length) {
    var character = string.charAt(i);
    if (character === ' ') {
      character = '<br />';
    }
    
    document.getElementById("demo").innerHTML += character;
    i++;
    setTimeout(printtext, speed);
  }

}

printtext();

<div id="demo"></div>

Answer 2

您可以使用很少的if语句来完成此操作，就像您可以说是否string.charAt(i) === " ")放置<br>以获得下一行

代码↓↓

var i = 0;
var string = "Size: test ";
var speed = 50;

function printtext() {

  if (i < string.length) {
     if(string.charAt(i) === " "){
         document.getElementById("demo").innerHTML += "<br>";
     }
     else 
       document.getElementById("demo").innerHTML += string.charAt(i);
    i++;
    setTimeout(printtext, speed);
  }

}

<button onclick="printtext()">Click me</button>
<div id="demo"></div>

Answer 3

最简单的方法可能是使用<pre>元素作为目标，并使用\n s作为换行符。

这样，您甚至可以避免使用.innerHTML，而改为使用.textContent或.innerText（which one you like）。

您还可以应用一些CSS来恢复默认字体：

var i = 0;
var string = "Size:\ntest ";
var speed = 50;

function printtext() {

  if (i < string.length) {
    document.getElementById("demo").innerText += string.charAt(i);
    i++;
    setTimeout(printtext, speed);
  }

}

pre{
  font: initial
}

<button onclick="printtext()">Click me</button>
<pre id="demo"></pre>

打印时转到下一行

3 个答案: