JavaScript显示<br>

Question

$(document).ready(function() { 
 
var dataText = ["Text on line one <br /> Text on line 2"]; 
 
function typeWriter(text, i, fnCallback) { 
 
if (i < (text.length)) { 
 
document.querySelector(".animate").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>'; 
 
setTimeout(function() { 
 
typeWriter(text, i + 1, fnCallback) 
 
}, 75); 
 
} 
 
else if (typeof fnCallback == 'function') { 
 
} 
 
} 
 
function StartTextAnimation(i) { 
 
if (typeof dataText[i] == 'undefined'){ 
 
setTimeout(function() { 
 
StartTextAnimation(0); 
 
}, 20000); 
 
} 
 
    if (i < dataText[i].length) { 
 
     setTimeout(function() { 
 
     typeWriter(dataText[i], 0, function(){ 
 
      StartTextAnimation(i + 1); 
 
     }); 
 
     }, 1000); 
 
    } 
 
} 
 
StartTextAnimation(0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="animate"></p>

，你可以看到，在“<”被印在很短的时间内，有没有什么办法来防止这种情况？添加HTML代码的休息，从JS代码删除它不起作用

Answer 1

希望下面的作品。更新了typeWriter函数中的代码。代码检查索引/位置<br />并增加计数器，更新innerHTML，然后再次调用typeWriter函数。

$(document).ready(function() { 
 
\t var dataText = ["Text on line one <br /> Text on line 2 <br /> Text on line 3"]; 
 

 
\t function typeWriter(text, i, fnCallback) { 
 
\t \t if (i < (text.length)) { 
 

 
\t \t \t //Updated code starts here 
 
\t \t \t if (i == text.indexOf("<br />", i)) { 
 
\t \t \t \t i += "<br />".length; 
 
\t \t \t \t document.querySelector(".animate").innerHTML += "<br />"; 
 
\t \t \t } 
 
\t \t \t else 
 
\t \t \t \t document.querySelector(".animate").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>'; 
 
\t \t \t //Updated code ends here 
 

 
\t \t \t setTimeout(function() { typeWriter(text, i + 1, fnCallback) }, 75); 
 
\t \t } 
 
\t \t else if (typeof fnCallback == 'function') { } 
 
\t } 
 

 
\t function StartTextAnimation(i) { 
 
\t \t if (typeof dataText[i] == 'undefined') { 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t StartTextAnimation(0); 
 
\t \t \t }, 20000); 
 
\t \t } 
 
\t \t if (i < dataText[i].length) { 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t typeWriter(dataText[i], 0, function() { 
 
\t \t \t \t \t StartTextAnimation(i + 1); 
 
\t \t \t \t }); 
 
\t \t \t }, 1000); 
 
\t \t } 
 
\t } 
 
\t 
 
\t StartTextAnimation(0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<p class="animate"></p>

Answer 2

会发生什么事是，你得到的人物一个接一个，

text.substring(0, i+1) 

所以<被添加第一则b然后r最后>

当你能做的，就是设置一个条件，当你发现一个特殊字符像<你会一次读取所有的字符，直到封闭>

因此，例如这会工作：

$(document).ready(function() { 
 
var dataText = ["Text on line one <br> Text on line 2"]; 
 
function typeWriter(text, i, fnCallback) { 
 
if (i < (text.length)) { 
 
if (text.charAt(i) === '<') { 
 
    // Get the index of the enclosing > tag 
 
    var tempIndex = text.indexOf('>', i); 
 
    // Add all the code from the < until the enclosing > 
 
    var textToAdd = text.substr(i, tempIndex + 1); 
 
    i = tempIndex; 
 
} else { 
 
    // If the character isn't a < just do the operation normally 
 
    textToAdd = text.substring(0, i +1); 
 
} 
 
document.querySelector(".animate").innerHTML = 
 
textToAdd +'<span aria-hidden="true"></span>'; 
 
setTimeout(function() { 
 
typeWriter(text, i + 1, fnCallback) 
 
}, 75); 
 
} 
 
else if (typeof fnCallback == 'function') { 
 
} 
 
} 
 
function StartTextAnimation(i) { 
 
if (typeof dataText[i] == 'undefined'){ 
 
setTimeout(function() { 
 
StartTextAnimation(0); 
 
}, 20000); 
 
} 
 
    if (i < dataText[i].length) { 
 
     setTimeout(function() { 
 
     typeWriter(dataText[i], 0, function(){ 
 
      StartTextAnimation(i + 1); 
 
     }); 
 
     }, 1000); 
 
    } 
 
} 
 
StartTextAnimation(0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="animate"></p>