js实现逐行打字，逐段打字效果(最全)

1、以下是实现逐行打字的效果

index.html。这里span之间不能有空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字机</title>
    <script type="text/javascript" src="text.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="myContent"></div>
<div id="contentToWrite" style="display: none"><span class="player-name">来到蜀门</span><br>成为一名<span class="player-school"></span><br>历经千锤百炼到了<span class="player-level"></span>级<br>战力达到了<span class="player-battle"></span></div>
<script type="text/javascript"> writeContent(true); </script>

</body>
</html>

text.js.

var charIndex = -1;
var stringLength = 0;
var inputText;

function writeContent(init) {
  if (init) {
    inputText = document.getElementById('contentToWrite').innerText;
    console.log(inputText)
  }
  if (charIndex == -1) {
    charIndex = 0;
    stringLength = inputText.length;
  }
  var initString = document.getElementById('myContent').innerHTML;
  console.log(initString)
  initString = initString.replace(/\s+/g, "<br>");
  var theChar = inputText.charAt(charIndex);
  var nextFourChars = inputText.substr(charIndex, 4);
  if (nextFourChars == '<BR>' || nextFourChars == '<br>') {
    theChar = '<BR>';
    charIndex += 3;
  }
  // initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
  initString = initString + theChar;
  // console.log(initString)
  document.getElementById('myContent').innerHTML = initString;
  charIndex = charIndex / 1 + 1;
  // if (charIndex % 2 == 1) {
  //   document.getElementById('blink').style.display = 'none';
  // } else {
  //   document.getElementById('blink').style.display = 'inline';
  // }
  // if (charIndex <= stringLength) {
  //   setTimeout('writeContent(false)', 140);
  // } else {
  //   blinkSpan();
  // }
  if (charIndex <= stringLength) {
    setTimeout('writeContent(false)', 140);
  }
}

// var currentStyle = 'inline';
//
// function blinkSpan() {
//   if (currentStyle == 'inline') {
//     currentStyle = 'none';
//   } else {
//     currentStyle = 'inline';
//   }
//   document.getElementById('blink').style.display = currentStyle;
//   setTimeout('blinkSpan()', 100);
// }

2、另一种逐行打字效果。通过匹配<br>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字机</title>
    <script type="text/javascript" src="text.js"></script>
</head>
<body>
<div id="myContent"></div>
<div id="contentToWrite" style="display:none;"> 春江花月夜<br>张若虚 唐<br> 春江潮水连海平，海上明月共潮生。<br>滟滟随波千万里，何处春江无月明！<br>
    江流宛转绕芳甸，月照花林皆似霰；<br>空里流霜不觉飞，汀上白沙看不见。<br> 江天一色无纤尘，皎皎空中孤月轮。<br>江畔何人初见月？江月何年初照人？<br> 人生代代无穷已，江月年年只相似。<br>不知江月待何人，但见长江送流水。<br>
    白云一片去悠悠，青枫浦上不胜愁。<br>谁家今夜扁舟子？何处相思明月楼？<br> 可怜楼上月徘徊，应照离人妆镜台。<br>玉户帘中卷不去，捣衣砧上拂还来。<br> 此时相望不相闻，愿逐月华流照君。<br>鸿雁长飞光不度，鱼龙潜跃水成文。<br>
    昨夜闲潭梦落花，可怜春半不还家。<br>江水流春去欲尽，江潭落月复西斜。<br> 斜月沉沉藏海雾，碣石潇湘无限路。<br>不知乘月几人归，落月摇情满江树。<br></div>
<script type="text/javascript"> writeContent(true); </script>
</body>
</html>

text.js

var charIndex = -1;
var stringLength = 0;
var inputText;

function writeContent(init) {
  if (init) {
    inputText = document.getElementById('contentToWrite').innerHTML;
  }
  if (charIndex == -1) {
    charIndex = 0;
    stringLength = inputText.length;
  }
  var initString = document.getElementById('myContent').innerHTML;
  initString = initString.replace(/<SPAN.*$/gi, "");
  var theChar = inputText.charAt(charIndex);
  var nextFourChars = inputText.substr(charIndex, 4);
  if (nextFourChars == '<BR>' || nextFourChars == '<br>') {
    theChar = '<BR>';
    charIndex += 3;
  }
  initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
  document.getElementById('myContent').innerHTML = initString;
  charIndex = charIndex / 1 + 1;
  if (charIndex % 2 == 1) {
    document.getElementById('blink').style.display = 'none';
  } else {
    document.getElementById('blink').style.display = 'inline';
  }
  if (charIndex <= stringLength) {
    setTimeout('writeContent(false)', 140);
  } else {
    blinkSpan();
  }
}

var currentStyle = 'inline';

function blinkSpan() {
  if (currentStyle == 'inline') {
    currentStyle = 'none';
  } else {
    currentStyle = 'inline';
  }
  document.getElementById('blink').style.display = currentStyle;
  setTimeout('blinkSpan()', 100);
}

3、逐段打印（一长段）

js实现逐行打字，逐段打字效果(最全)

index.html

<script src="js/l-by-l.min.js"></script>
<p class="word1"></p>
<p class="word2"></p>
<script>
	jQuery(document).ready(function($){
	    
	    $(".word1").lbyl({
	        content: "朦胧的月色正浓，星光与静夜默言无声，一个人的夜，一个人的惆怅心思。隐约着怎样面对一份不确定的爱感情的抉择，陷入爱里的不能自拔的人，没有了智商，低的可怜，痴痴的，一个人一旦遇上且喜欢的人，就会痴心，傻傻的，乱了方寸，无所适从，做什么都手足无措。爱上你，总是盼望你出现，一旦有你的身影，却又胆怯不敢打扰，所以越是想接近，却想逃离，越是想逃离，越想接近，转身背过脸去，却越清晰的看见，你的影子，从各个角度，从镜子反射过来你的身影，一个人活在一个人的影子里。如果，时间可以证明一切，是不是如我想象的你，是不是爱着我，给我勇气，告诉我，让我有信心不再闪躲，好敢于面对你，和你在一起，默默的相伴，默默的欢喜。红尘陌上，花开几许，你可以选择爱或不爱我，而我只能选择爱或更爱你！",
	        speed: 100,
	        type: 'show',
	        finished: function(){ 
	        	$('.word2').lbyl({
	        		content:"生命的开始到结束就是一个由绽放到凋谢的花季，而心态却永如盛开摇曳的花朵般娇艳，只要心花不败，爱情的花自开，暗香飘来。一颗年轻的心是本色的心，不论成，不论败，顺境与逆境，晴朗时，碧心一片望朗月当空，淡雅观云水沸腾，有策马扬鞭的勇气，登高怀远的志向，阴霾时，请记得水穿会石开，避开那寒风，一物见佛，听水寂静，关云霁而忘我，前念后念，是否该随缘，爱抚被歧视的伤痛，温润浸透泪水的心灵。生命短短数十年，不论成败，百年后都成过眼烟云，让内心宽远，就不会坠入痛苦的深渊，在人生的任何阶段，如履平地，总会安然的度过。",
	        		speed: 150,
	        		type: 'fade',
	        		fadeSpeed: 500
	        	})
	        } // Finished Callback
	    });

	});
	</script>

l-by-l.min.js


/*
Copyright © 2015 HTML5andBeyond.com
Licensed Under MIT
*/

(function ( $ ) {
 
    $.fn.lbyl = function( options ) {
 
        var s = $.extend({
            content: '',
            speed: 10,
            type: 'fade',
            fadeSpeed: 500,
            finished: function(){}
        }, options );

        var elem = $(this),
            letterArray = [],
            lbylContent = s.content,
            count = $(this).length;
        
        elem.empty();
        elem.attr('data-time', lbylContent.length * s.speed)
                                
        for (var i = 0; i < lbylContent.length; i++) {
            letterArray.push(lbylContent[i]);
        }
            
        $.each(letterArray, function(index, value) {
        elem.append('<span style="display: none;">' + value + '</span>');

            setTimeout(function(){
                if (s.type == 'show') {
                    elem.find('span:eq(' + index + ')').show();
                } else if (s.type == 'fade') {
                   elem.find('span:eq(' + index + ')').fadeIn(s.fadeSpeed); 
                }
            }, index * s.speed);

        });

        setTimeout(function(){
            s.finished();
        }, lbylContent.length * s.speed);
        
    };
 
}( jQuery ));