主要利用了setTimeout(),遞歸和String.substring();
做出的效果就像是有一個打字員在打字.
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title></head><body bgcolor="#ccc" onload="printer();"> <h2 align="center">文本自動輸出</h2> <br> <br> <hr width="400" color="black"> <br> <form align="center"> <textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea> </form></body><script type="text/javascript"> //獲取textarea對象 var text=document.getElementById("text"); //要輸出的內容 var str=" 傳統的HTML語言不能開發交互式的動態網頁，而JavaScript卻能很好的做到這一點。JavaScript是一門相當簡單易學的網絡化編程語言，通過把她和HTML語言相互結合起來，能夠實現實時的動態網頁特效，這給網頁瀏覽者在瀏覽網頁的同時也提供了某些樂趣。"; var pos=0; //利用遞歸和setTimeout()實現文字輸出 function printer(){ text.value=str.substring(0,pos)+"|"; //判斷是否到達結尾.如果是則一秒后再來一遍. if(pos++>str.length){ pos=0; setTimeout("printer()",1000); }else{ setTimeout("printer()",50); } }</script></html>方法二：JavaScript實現打字電腦打字效果
<span id="demo"></span><script defer>var text="JavaScript實現的打字效果" //預定文字var delay=200 //文字出現的時間間隔var i=0 //初始化變量 ifunction scrollit(){//設置 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()函數else setTimeout("scrollit()",delay) }scrollit() //調用scrollit()函數</script>方法三：
<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>標題頁</title> <script language=javascript>var layers =document.layers;var style=document.all;var both=layers||style;var idme=908601;if(layers){ layerRef='document.layers';styleRef ='';}if(style){ layerRef='document.all';styleRef = '.style';}//開始參數的定義function writeOnText(obj,str){if(layers)with(document[obj]){ document.open();document.write(str);document.close();}if(style)eval(obj+'.innerHTML=str'); }var dispStr=new Array("證監會稱將嚴查利用內幕信息牟取不當利益行為!"); //要出現的文本var overMe=0;//逐字顯示的方法function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd){var mystr='',strchar='';var skip=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);}} else if (document.all){ding.Stop();setTimeout("ding.Run()",100);}overMe=1;}else overMe=0;writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2+"'>"+strchar+"</font></span>");setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}function init(){txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}</script><BODY onload=init()><DIV class=style1 id=div1></DIV></BODY></html>新聞熱點
疑難解答
