javascript - 带有 JavaScript 的 HTML 打字机效果

Question

<分区>

Answer 1

我认为你真的不需要插件来做这些事情，我举了一个简单的例子:

html:

 <div id="typewriter"></div>

js:

var str = "<p>This is my <span style='color:red;'>special string</span> with an <img src='http://placehold.it/150x150'> image !</p>",
    i = 0,
    isTag,
    text;

(function type() {
    text = str.slice(0, ++i);
    if (text === str) return;

    document.getElementById('typewriter').innerHTML = text;

    var char = text.slice(-1);
    if( char === '<' ) isTag = true;
    if( char === '>' ) isTag = false;

    if (isTag) return type();
    setTimeout(type, 80);
}());

这是关于 jsfiddle 的演示