Question

Typewriter-Effect for HTML with JavaScript

我在Javascript中看到这篇关于“打字机”效果的文章，并认为这是一个非常好的效果。我现在正在浏览器中使用某种“终端”，但我偶然发现了文本被替换的问题，如果多次调用该函数，则不会添加到新行。

这是一个例子。

function writeText(target, string, speed) {

  var i = 0;
  var isTag, text;

  (function type() {

    text = string.slice(0, ++i);
    if (text === string) return;

    target.html(text);

    var char = text.slice(-1);
    if (char === '<') isTag = true;
    if (char === '>') isTag = false;
    if (isTag) return type();

    setTimeout(type, speed);

  }());

}

var output = $('#output');
writeText(output, 'This is a test string.', 20);
writeText(output, 'This is a string that replaces the first one.', 20);

<div id="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

每次调用函数时，是否有一种简单的方法可以改进脚本来创建新行？我已经尝试使用.append() .html()的{{1}}，但这也不起作用。我正在使用的代码片段由Tachun Lin在另一篇文章中发布。

提前致谢。

Javascript打字机效果无法创建新行

0 个答案: