html⽹页中⽤最简单的JS实现⽂字逐个显⽰的效果
关于使得⽂字能在⽹页中逐字显⽰的JS，⽹友分享的有很多，我从中选了⼏个试了⼀下，不是很理想。
第⼀个：
<p id="aa"></p>
<div id="w">⼈⽣最美的事情就是能和你相遇！</div>
<script src="jquery.min.js"></script>
<script type="text/javascript">
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>
jquery是什么有什么作用这个我是真搞不通，我承认⾃⼰是⼩⽩，试了⼀下，除了空⽩，没见到⼀丁点反应。然后我试着将<div>当中的“display:none”去掉，结果，⼀刷新，整句话齐刷刷显现出来，呢么，到底是啥意思？
第⼆个：
<p id="text1"></p>
<script>
var i=0;
var str="爱是⼀道光，绿到你发慌";
window.οnlοad=function typing(){
//获取div
var ElementById("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" ></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>
但是，依然还是有两个瑕疵：
⼀个是，每段末尾，都会显⽰⼀下“<”符号，这个符号是“<br />”的左边部分，但是如果把“<br />”写成“br />”则失去换⾏的效果。
另⼀个是，content 当中的⽂字除了第⼀⾏遵守⽗级css规则外，其他各⾏都不再遵守。于是，第⼀段⾸⾏可以缩进两字符，第⼆段开始却不⾏。
到⽬前为⽌，我也没研究出到底该咋办！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。