當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

完成文字的打字效果的JS代碼如何寫

完成文字的打字效果的JS代碼如何寫

更新時間:2023-06-22 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

文字的打字效果

【實例描述】

打字效果是將一段文本逐個文字地顯示,實現打字的效果。本例學習如何制作這樣的特效。


【實例代碼】

   <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中,添加一個div,代碼如下所示: <BODY onload=init()> <DIV class=style1 id=div1></DIV> </BODY> </html>

【運行效果】

運行效果

【難點剖析】

本例的重點其實是實現這種效果的思路,代碼并不是關鍵。在本例中,要實現一段文本的打字特效,首先將這段文本放在數組中,然后利用兩個變量,實現打字和顯示的效果,“打字”變量只是顯示光標當前的某個字符,而“顯示”變量則顯示當前光標前所有的字符。

【源碼下載】

本實例JS代碼下載


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品