个人觉得比较实用
实现起来也比较简单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
text-align: center;
font-size: 20px;
font-weight: bold;
color:#668b3ba3;
}
</style>
<body>
<p id="showStr"></p>
<div style="display:none" id="string">
轻轻的我走了,
正如我轻轻的来;
我轻轻的招手,
作别西天的云彩。
----
那河畔的金柳,
是夕阳中的新娘;
波光里的艳影,
在我的心头荡漾。
----
软泥上的青荇,
油油的在水底招摇;
在康河的柔波里,
我甘心做一条水草!
----
那榆荫下的一潭,
不是清泉,是天上虹;
揉碎在浮藻间,
沉淀着彩虹似的梦。
----
寻梦?撑一支长篙,
向青草更青处漫溯;
满载一船星辉,
在星辉斑斓里放歌。
----
但我不能放歌,
悄悄是别离的笙箫;
夏虫也为我沉默,
沉默是今晚的康桥!
----
悄悄的我走了,
正如我悄悄的来;
我挥一挥衣袖,
不带走一片云彩。
</div>
<script>
var timer=null;
var index = 0;
var str = document.getElementById("string").innerHTML;
function type() {
if(index == str.length) {
//index = 0;
clearInterval(timer)
}
document.getElementById("showStr").innerText = str.substring(0, index++);
console.log(index)
}
timer=setInterval(type, 10); //通过定时器来让文字逐步显示
</script>
</body>
</html>