Нужна помощь в Javascript Text Typer Effect

Question

У меня есть яваскрипта код текста 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> 

I хочу знать, как я могу использовать <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> 

⚠ тестировался только с Chrome ⚠

<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

Вместо передачи <br> char by char, вы можете поместить \n и преобразовать его в <br> при изменении 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/), для набора текста анимации :)