Question

我有一个javascript文本typer代码：

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>标记（跳过一行或移动到另一行）。我试过很多方法但是失败了，如果我输入我的名字就是Master M1nd我想要的。然后我想走另一条路我怎么去？

Answer 1

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

例如（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('Hello\nWorld!', document.getElementById('writer'));

  function type() {
        if (typeNext()) setInterval(type, 500); 
  }

  setInterval(type, 500);

也可能你有兴趣探索requestAnimationFrame（http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/），为你的打字动画：）

Answer 2

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

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

⚠仅使用Chrome tested进行测试

<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>

在Javascript Text Typer Effect中需要帮助

2 个答案: