大概是这样的效果：
第一步，找一个输出的地方。
……/index.html
…….
<div id=”out” style=”……”><div>
…….
第二步，JS代码部分。
//找对象
out=document.querySelector(“#output”);
//创建一个输出的方法
function output(say){
out.innerHTML=””; //清空对话框里的内容
says=say.split(””); //say就是将要输出的字符串，处理成一个数组，方便一个个打出
count=say.length;
i=0; //用来计数
print=function(){
out.innerHTML+=says[i]; //每调用一次，就在当前的字符框内追加一个字符
i++;
if(i>=count) return; //计数
setTimeout(print,100); //延迟一段时间重新调用
}
print();
}
output(“隐约雷鸣，阴霾天空，但愿风雨来，能留你在此地”); //调用函数输出值
最后的效果是这样的：
基本的功能完成了。但是，这个方法现在只能输出id为”out”的元素，如果换一个元素名称的话就得去修改函数里面的内容了。或许我们可以改进一下这个方法,让它可以对指定的元素输出值。
首先，创建两个输出框：
<div id=”out1” style=”……”><div>
<div id=”out2” style=”……”><div>
现在不仅要输出内容，还要输出到指定的地方，因此函数应该传递两个值：
function output(who,say){
out.innerHTML=””; //将之前函数里面使用”out”的地方改为参数”who”
says=say.split(””);
count=say.length;
i=0;
print=function(){
who.innerHTML+=says[i];
i++;
if(i>=count) return;
setTimeout(print,100);
}
print();
}
output(out2,“隐约雷鸣，阴霾天空，但愿风雨来，能留你在此地”);
setTimeout(“output(out,’隐约雷鸣，阴霾天空，但愿风雨来，能留你在此地’)”,4000);
好了，这样就可以控制往哪个地方输出文字了。
为什么要给第二次打印设置一个延迟呢？？？
因为。。。当他们一起打印的时候是这样的：
调用代码：
output(out2,“隐约雷鸣，阴霾天空，但愿风雨来，能留你在此地”);
output(out,“隐约雷鸣，阴霾天空，但愿风雨来，能留你在此地”);
结果：
也就是说当我两个连续使用的时候，第二次使用的who和say会覆盖掉第一次使用的值，但此时第一次的setTimeout没有停止（打字的速度快了一倍，同时还出现了一个undefind,说明有两个setTimeout在进行）。为什么呢？可以把方法output想象成一个打字员，如果同时给他两个紧急工作去做，他肯定应付不过来。因此在这里我们需要多个打字员。
╯︿╰后面的我做不出来了。。。。QAQ
我的构想是定义一个typer(打字员），然后用new方法造出两个打字员。
function typer(){
//打字员的工作当然是打字啦~
this.work=function(who,say){
who.innerHTML="";
says=say.split("");
count=say.length;
i=0;
flag=0;
print=function(){
who.innerHTML+=says[i];
i++;
if(i>=count) return;
setTimeout(print,100);
}
window.onclick=function() {flag=1;};
print();
}
A=new typer();
B=new typer();
A.work(out,"隐约雷鸣，阴霾天空，但愿风雨来，能留你在此地");
B.work(out2,"隐约雷鸣，阴霾天空，即使天无雨，我亦留此地。");
但是最后还是会出现和刚才一样的情况。。
算了，以后再更新吧。
原文地址：https://www.cnblogs.com/dfnonor/p/9749056.html