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>