标签:一段 图片 efi set 没有 使用 字符 out 控制
大概是这样的效果:
第一步,找一个输出的地方。
……/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,"隐约雷鸣,阴霾天空,即使天无雨,我亦留此地。");
但是最后还是会出现和刚才一样的情况。。
算了,以后再更新吧。
标签:一段 图片 efi set 没有 使用 字符 out 控制
原文地址:https://www.cnblogs.com/dfnonor/p/9749056.html