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>