需要帮助 Javascript 文本打字器效果

Question

我有一个javascript文本打字器代码：

.CSS：

body 
{
    background-color:black;
}
#writer
{ 
    font-family:Courier;
    font-size:12px;
    color:#24FF00;
    background-color:black;
}

Javascript：

var text = "Help Please, i want help.";
var counter = 0;
var speed = 25;
function type()
{
    lastText =  document.getElementById("writer").innerHTML;
    lastText+=text.charAt(counter);
    counter++;
    document.getElementById("writer").innerHTML = lastText;
}
setInterval(function(){type()},speed);

.HTML：

<div id="writer"></div>

我想知道如何使用<br>标签（跳过一行或移动到另一行）。我尝试了很多方法，但失败了，我希望如果我输入我的名字是 M1nd 大师。 然后我想走另一条线，我会怎么走？

Answer 1

我做了一个jQuery插件，希望这会让你更轻松。这是一个现场演示：http://jsfiddle.net/wared/V7Tv6/。如您所见，jQuery是通过第一个<script>标签加载的。然后，如果您愿意，可以对其他<script>标签执行相同的操作，这不是必需的，但被认为是一种很好的做法。只需将每个标签中的代码放入单独的文件中，然后按以下顺序设置适当的src属性：

<script src=".../jquery.min.js"></script>
<script src=".../jquery.marquee.js"></script>
<script src=".../init.js"></script>

⚠ 仅通过铬⚠测试

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery.fn.marquee = function ($) {
    function findTextNodes(node) {
        var result = [],
            i = 0,
            child;
        while (child = node.childNodes[i++]) {
            if (child.nodeType === 3) {
                result.push(child);
            } else {
                result = result.concat(
                    findTextNodes(child)
                );
            }
        }
        return result;
    }
    function write(node, text, fn) {
        var i = 0;
        setTimeout(function () {
            node.nodeValue += text[i++];
            if (i < text.length) {
                setTimeout(arguments.callee, 50);
            } else {
                fn();
            }
        }, 50);
    }
    return function (html) {
        var fragment, textNodes, text;
        fragment = $('<div>' + html + '</div>');
        textNodes = findTextNodes(fragment[0]);
        text = $.map(textNodes, function (node) {
            var text = node.nodeValue;
            node.nodeValue = '';
            return text;
        });
        this.each(function () {
            var clone = fragment.clone(),
                textNodes = findTextNodes(clone[0]),
                i = 0;
            $(this).append(clone.contents());
            (function next(node) {
                if (node = textNodes[i]) {
                    write(node, text[i++], next);
                }
            })();
        });
        return this;
    };
}(jQuery);
</script>
<script>
jQuery(function init($) {
    var html = 'A <i>marquee</i> which handles <u><b>HTML</b></u>,<br/> only tested with Chrome. <a href="#">Replay</a>';
    $('p').marquee(html);
    $('a').click(function (e) {
        e.preventDefault();
        $('p').empty();
        $('a').off('click');
        init($);
    });
});
</script>
<p></p>
<p></p>

Answer 2

您可以放置一个n并在修改innerHTML时将其转换为<br>，而不是逐个字符传递<br>字符。

例如 （http://jsfiddle.net/qZ4u9/1/）：

  function escape(c) {
      return (c === 'n') ? '<br>':c;
  }
  function writer(text, out) {
      var current = 0;
      return function () {
          if (current < text.length) {
              out.innerHTML += escape(text.charAt(current++));   
          }
          return current < text.length;
      };
  }
  var typeNext = writer('HellonWorld!', document.getElementById('writer'));
  function type() {
        if (typeNext()) setInterval(type, 500); 
  }
  setInterval(type, 500);

另外，您可能有兴趣探索 requestAnimationFrame （http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/），用于键入动画:)