怎樣用JavaScript製作打字效果的文字特效

來源：酷知科普網 2.39W

文字如何實現打字的效果呢?在瀏覽網頁的時候也經常能看到這種效果。本節給出了一個打字效果的文字特效，文字一個一個地列印在頁面上。
本節程式碼主要使用了 onMousedown 事件和 on 屬性，主要功能和用法如下。

步驟/方法

（01）setTimeout 方法，在執行時是在載入後延遲指定時間後，去執行一次表示式，僅執行一次。

（02）charAt 方法返回一個字元值，該字元位於指定索引位置。字串中的第一個字元的索引為0，第二個的索引為1，等等。超出有效範圍的索引值返回空字串。

（03）<html><head><title>打字效果的文字特效</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script language="JavaScript">var layers = rs;var style=;var both = layers || style;var idme = 908601;if(layers) //如果不是ie瀏覽器{layerRef = 'rs';styleRef = '';}if(style) //如果是ie瀏覽器{layerRef = '';styleRef = 'e';}function writeOnText(obj, str) { //函式在頁面上列印字串if(layers) {with(document[obj]) {();e(str); //write方法列印字串e();}}if(style) eval(obj+'rHTML = str'); //使用innerHTML屬性顯示字串}var dispStr = new Array("javascript原始碼大全"); //字串陣列var overMe = 0;function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函式:實現打字效果{var tmp0 = tmp1 = '', skip = 100;if(both && idx <= th) {if(At(idx) == '<') {while(At(idx) != '>') idx++;idx++;}if(At(idx) == '&' && At(idx+1) != '') {while(At(idx) != ';') idx++;idx++;}tmp0 = e(0, idx);tmp1 = At(idx++);if(overMe==0 && plysnd==1) {if(ins[0]) {if(ins["LiveAudio"][0] == "audio/basic" && Enabled()) {ds[0]();setTimeout("ds[0](false)", 100);}} else if() {();setTimeout("()", 100);}overMe = 1;} else {overMe = 0;}writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");//呼叫writeOnText函式將字元顯示在網頁上setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+", "+plysnd+")", delay);}}function init(){txtTyper(dispStr[0], 0, 'tt10', 'ttll', '#339933', '#99FF33', 300, 0);　//呼叫txtTyper函式開始打字}</script></head><body onLoad="init();"><center><h1>打字效果的文字特效</h1><hr /><br /><div class="ttll" id="tt10"></div></center></body></html>

（04）執行該程式後，頁面出現一個提示資訊，然後逐個出現字元。如此逐個出現字元後，等待全部列印完畢即可停止列印，如下圖所示。