关于使得文字能在网页中逐字显示的JS，网友分享的有很多，我从中选了几个试了一下，不是很理想。

第一个：

<p id="aa"></p>
<div style="display:none" id="w">人生最美的事情就是能和你相遇！</div>
<script src="jquery.min.js"></script>
<script type="text/javascript">
    window.onload = type;
    var index = 0;
    var word = $("#w").html();
    function type(){
        $("#aa").html(word.substring(0,index++));
        if(index > word.length) {
            return;
        } else {
            setTimeout(type,50);
        };
    }
</script>


这个我是真搞不通，我承认自己是小白，试了一下，除了空白，没见到一丁点反应。然后我试着将<div>当中的“display:none”去掉，结果，一刷新，整句话齐刷刷显现出来，呢么，到底是啥意思？


第二个：

   <p id="text1"></p>    
<script>        
    var i=0;
    var str="爱是一道光，绿到你发慌";            
    window.οnlοad=function typing(){
                //获取div
        var mydiv=document.getElementById("text1");
        mydiv.innerHTML+=str.charAt(i);
        i++;
        var id=setTimeout(typing,80);
        if(i==str.length){
            clearTimeout(id);
            }
        }
</script>


这个我试了一下，可以用，能够逐字展现，但美中不足的是，不能分段！我首先试了一下加入<div>实现分段，但是，加入后就一片空白了。

我以为是其中有空内容，于是将所有文字及div 堆到一起，还不行。

然后我又试了一下加入换行符<br />，也不行，它不认为这是个换行符，只是一个文字。


第三个：


<body onLoad="show()">
        <div id="txt"></div>
        <script language="javascript">
            content = "我对着话筒响响地吻了几下，就听到孩子那边断断续续地声音：“谢谢……爸爸，我好……高兴，好……幸福……”";
            i = 0;
 
            function show() {
                str = content.substr(0, i);
                txt.innerHTML = str + "｜";
                i++;
                if (i > content.length) i = 0;
                setTimeout("show()", 200);
            }
        </script>

    </body>

这个我试了一下，可以用，但同样的只能处理一段文字，不能处理一篇文章，加入div 也好，使用li 或者p 等等来分段，都不行。

不过，这个代码中加入换行符“<br />”却可以起作用，而且页面也不会显示错误。

<body onLoad="show()"><div>
        <div id="txt" style="text-indent:2em;"></div>
        <script language="javascript">
            content = "蓝色多瑙河之恋<br />多瑙河的浪花<br />和着小提琴的悠扬<br />溅出一朵一朵幽蓝色的蔷薇<br />昏暗的角落<br />一杯cappuccino<br />随着圆舞曲的旋转旋转渐渐温热<br />曼妙的节奏<br />两个人<br />不免荡起心中一阵又一阵憧憬的美好<br />蓝色的风<br />蓝色的风弥漫房间<br />从德国的黑林山吹向乌克兰<br />和着欢快的节奏<br />舞池中央<br />一个女孩和着风在旋转<br />她不知道她在等待着谁<br />她只知他也有着同多瑙河一样明净的心<br />和飘过多瑙河的风一样温柔的眼睛<br />风儿飘飘<br />女孩的嘴角漾起微笑<br />仿若多瑙河的蓝色河水一般清澈 ";
            i = 0;
 
            function show() {
                str = content.substr(0, i);
                txt.innerHTML = str + "｜";
                i++;
                if (i > content.length) i = 0;
                setTimeout("show()", 200);
            }
        </script>
</div>
    </body>

效果预览：https://www.ximenfeixue/article/1145.html

但是，依然还是有两个瑕疵：

一个是，每段末尾，都会显示一下“<”符号，这个符号是“<br />”的左边部分，但是如果把“<br />”写成“br />”则失去换行的效果。

另一个是，content 当中的文字除了第一行遵守父级css规则外，其他各行都不再遵守。于是，第一段首行可以缩进两字符，第二段开始却不行。

到目前为止，我也没研究出到底该咋办！

更多推荐

html网页中用最简单的JS实现文字逐个显示的效果