我需要添加换行符，所以我使用了<br>标记。但是，这会导致左括号(<(在实际应用换行符之前显示几毫秒。
这是我的代码：
<!DOCTYPE html>
<html>
<body>
<div id="typing" class="typing"></div>
<script>
var typeString = ['I m Mr. Frits and <br> i love Pakistan...:)'];
var i = 0;
var count = 0
var selectedText = '';
var text = '';
(function type() {
if (count == typeString.length) {
count = 0;
}
selectedText = typeString[count];
text = selectedText.slice(0, ++i);
document.getElementById('typing').innerHTML = text.fontsize(50);
document.getElementById('typing').style.fontFamily = "monospace";
document.getElementById("typing").style.color = "black";
document.getElementById("typing").style.fontWeight = "bold";
if (text.length === selectedText.length) {
count++;
i = 0;
}
setTimeout(type, 300);
}());
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
}
</script>
</body>
</html>
您可以将div替换为pre，然后将<br>更改为n。
或者你可以检查一下标签，然后马上写出来。
正如@Bahaa所说，这里有一段工作代码：
<!DOCTYPE html>
<html>
<body>
<pre id="typing" class="typing"></pre>
<script>
var typeString = ['I m Mr. Frits andni love Pakistan...:)'];
var i = 0;
var count = 0
var selectedText = '';
var text = '';
(function type() {
if (count == typeString.length) {
count = 0;
}
selectedText = typeString[count];
text = selectedText.slice(0, ++i);
document.getElementById('typing').innerHTML = text.fontsize(50);
document.getElementById('typing').style.fontFamily = "monospace";
document.getElementById("typing").style.color = "black";
document.getElementById("typing").style.fontWeight = "bold";
if (text.length === selectedText.length) {
count++;
i = 0;
}
setTimeout(type, 300);
}());
</script>
</body>
</html将格式化位放入单独的样式部分(CSS(可能是个好主意。这将使您的JavaScript更短。我做了一些更改，比如将所有变量声明放入IIFE，并用一个setInterval()调用替换重复的setTiemout()调用。以下是的工作片段
var typeString = ['I 'm Mr. Frits andnI love Pakistan...:)',
'It isnso nicento meetnyou!'];
(function(){
var i=0,count=0;
function type() {
var selectedText,text;
selectedText = typeString[count=count%typeString.length];
text = selectedText.slice(0,++i);
document.getElementById('typing').innerHTML = text;
if (0==(i=i%selectedText.length)) ++count;
}
setInterval(type, 300);
})();#typing {font-family:monospace; font-size:30px; font-weight:900;
white-space:pre-wrap}<div id="typing"></div>