本節代碼主要使用了 onMousedown 事件和 event.button 屬性，主要功能和用法如下。
• setTimeout 方法，在執行時是在載入後延遲指定時間後，去執行一次運算式，僅執行一次。
• charAt 方法返回一個字元值，該字元位於指定索引位置。字串中的第一個字元的索引為0，第二個的索引為1，等等。超出有效範圍的索引值返回Null 字元串。
<html> <head> <title>打字效果的文字特效</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="JavaScript"> var layers = document.layers; var style = document.all; var both = layers || style; var idme = 908601; if(layers) //如果不是ie瀏覽器 { layerRef = 'document.layers'; styleRef = ''; } if(style) //如果是ie瀏覽器 { layerRef = 'document.all'; styleRef = '.style'; } function writeOnText(obj, str) { //函數在頁面上列印字串 if(layers) { with(document[obj]) { document.open(); document.write(str); //write方法列印字串 document.close(); } } if(style) eval(obj+'.innerHTML = str'); //使用innerHTML 屬性顯示字串 } var dispStr = new Array("雲棲社區-www.jb51.net"); //字串數組 var overMe = 0; function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函數:實現打字效果 { var tmp0 = tmp1 = '', skip = 100; if(both && idx <= str.length) { if(str.charAt(idx) == '<') { while(str.charAt(idx) != '>') idx++; idx++; } if(str.charAt(idx) == '&' && str.charAt(idx+1) != '') { while(str.charAt(idx) != ';') idx++; idx++; } tmp0 = str.slice(0, idx); tmp1 = 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(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 /> <div class="ttll" id="tt10"></div> </center> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
運行該程式後，頁面出現一個提示資訊，然後逐個出現字元。如此逐個出現字元後，等待全部列印完畢即可停止列印。
來源程式解讀
（1）程式首先建立了一個層，其 ID 為 ttl0，便於以後調用。這個層用來顯示列印的文字。
（2）程式在<body>元素上添加 onLoad 事件，當整個頁面載入完成以後，該事件被觸發，調用 init() 事件處理函數，對該事件進行處理。
（3）在函數 txtTyper() 中，使用 charAt 方法得到字串中的某個字元。使用 if 條件陳述式判斷該字元是否滿足盡頭。滿足條件後列印在頁面上。
（4）在 if 語句中，也可使用任意合法的 JavaScript 語句，完成更為複雜的操作。
