javascript实现自动输出文本(打字特效)
主要利用了setTimeout(),递归和String.substring();
做出的效果就像是有一个打字员在打字.
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>Document</title>
</head>
<bodybgcolor="#ccc"onload="printer();">
<h2align="center">文本自动输出</h2>
<br>
<br>
<hrwidth="400"color="black">
<br>
<formalign="center">
<textareacols="50"rows="30"id="text"style="background-color:#FF99CC;color:#330033;cursor:default;font-family:Arial;font-size:18px"wrap=virtual></textarea>
</form>
</body>
<scripttype="text/javascript">
//获取textarea对象
vartext=document.getElementById("text");
//要输出的内容
varstr="传统的HTML语言不能开发交互式的动态网页,而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言,通过把她和HTML语言相互结合起来,能够实现实时的动态网页特效,这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
varpos=0;
//利用递归和setTimeout()实现文字输出
functionprinter(){
text.value=str.substring(0,pos)+"|";
//判断是否到达结尾.如果是则一秒后再来一遍.
if(pos++>str.length){
pos=0;
setTimeout("printer()",1000);
}else{
setTimeout("printer()",50);
}
}
</script>
</html>
方法二:JavaScript实现打字电脑打字效果
<spanid="demo"></span>
<scriptdefer>
vartext="JavaScript实现的打字效果"//预定文字
vardelay=200//文字出现的时间间隔
vari=0//初始化变量i
functionscrollit(){
//设置id为demo的对象内的文字为从变量text的0开始到i间的文字加"_"
demo.innerText=text.slice(0,i++)+"_"
if(i>text.length){//当i大于text的文本长度时
i=0//重设i为0,使文字重新从第一个文字出现
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点
setTimeout("scrollit()",delay*10)
}
//否则在delay毫秒后再次执行scrollit()函数
elsesetTimeout("scrollit()",delay)
}
scrollit()//调用scrollit()函数
</script>
方法三:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>标题页</title>
<scriptlanguage=javascript>
varlayers=document.layers;
varstyle=document.all;
varboth=layers||style;
varidme=908601;
if(layers)
{layerRef='document.layers';styleRef='';}
if(style)
{layerRef='document.all';styleRef='.style';}
//开始参数的定义
functionwriteOnText(obj,str)
{
if(layers)with(document[obj])
{document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str');
}
vardispStr=newArray("证监会称将严查利用内幕信息牟取不当利益行为!");//要出现的文本
varoverMe=0;
//逐字显示的方法
functiontxtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
varmystr='',strchar='';
varskip=200;
if(both&&idx<=str.length){
if(str.charAt(idx)=='<'){while(str.charAt(idx)!='>')idx++;}
if(str.charAt(idx)=='&'&&str.charAt(idx+1)!=''){while(str.charAt(idx)!=';')idx++;}
mystr=str.slice(0,idx);//返回数组从开始到指定位置的字符串
strchar=str.charAt(idx++);//当前地址的字符
if(overMe==0&&plysnd==1)
{
//针对浏览器的不同,调用不同的显示方法
if(navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic"&&navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
}elseif(document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}elseoverMe=0;
writeOnText(objId,"<spanclass="+objStyle+"><fontcolor='"+color1+"'>"+mystr+"</font><fontcolor='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"',"+idx+",'"+objId+"','"+objStyle+"','"+color1+"','"+color2+"',"+delay+","+plysnd+")",delay);}}
functioninit()
{txtTyper(dispStr[0],0,'div1','style1','#66CCBB','#000000',400,0);}
</script>
<BODYonload=init()>
<DIVclass=style1id=div1></DIV>
</BODY>
</html>