如何在JavaScript中创建打字机效果，这将考虑html标记规则

How to create a typewriter effect in JavaScript THAT will take into account html tag rules?

本文关键字：html 规则 JavaScript 创建 打字机      更新时间：2023-09-26

假设我有一些来自div标记的文本，如下所示：

 <div id="outPutContainer">
     <div id="contentDiv" style="display:none;"> This is some cool content... </div>
 </div>

现在，如果我愿意的话，我可以创建一个JavaScript函数，一次打印一个字符，它会很好地工作。以下示例。

function printSentence(inner, outer, index, speed) {
    var input = document.getElementById(inner).innerHTML;
    var timer = setInterval(function(){
        document.getElementById(outer).innerHTML+=input.charAt(index);
        index++;
        if(index  == sentence.length -1){
            printResume(inner, outer, index+1, speed);
        }else{
           clearInterval(timer);
        }
     }, speed);
}
printSentence("contentDiv", "outPutContainer", 0, 100);

同样，上面的函数工作得很好，但假设我想考虑元素中的html标记，这将如何工作。就是一个例子

<div id="contentDiv2"> This is some cool <strong>content</strong>
    <p>Paragraph of content</p>
</div>

所以理想的效果是

这是一些很酷的内容

内容段落

（打字机的效果受到了查理的启发）"我喜欢在应该表扬的地方表扬"（：Javascript打字效果

我想我可以加入一个jsFiddle，让人们更容易相处。http://jsfiddle.net/bJxe3/19/

您可以使用字符串的子字符串更新内容，而不是一次添加一个字符，直到索引。如果索引处的字符是小于号（<），只需向前跳到下一个大于号（>）。

代码段：

const printSentence = (id, sentence, speed = 50) => {
  let index = 0;
  let element = document.getElementById(id);
  
  let timer = setInterval(function() {
    const char = sentence[index];
    
    if (char === '<') {
      index = sentence.indexOf('>', index);  // skip to greater-than
    }
    
    element.innerHTML = sentence.slice(0, index);
    
    if (++index === sentence.length) {
      clearInterval(timer);
    }
  }, speed);
} // printSentence
printSentence(
  'contentDiv',
  'This is some cool <strong>content</strong>.<p>Paragraph of content</p><ul><li>This<li>is<li>a<li>test</ul><table><tr><th>Header 1<th>Header 2<tr><td>Row 2, Col 1<td>Row 2, Col 2</table>',
  50
);
body, table {font: 12px verdana;}
table {border-spacing: 0;}
td,th {border: 1px solid gray;}
th {background: #def;}
<div id="contentDiv"></div>

相关文章：