个人觉得比较实用
实现起来也比较简单
<!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>