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

電腦
關注：2.29W次

文字如何實現打字的效果呢?在瀏覽網頁的時候也經常能看到這種效果。本節給出了一個打字效果的文字特效，文字一個一個地打印在頁面上。
本節代碼主要使用了 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）運行該程序後，頁面出現一個提示信息，然後逐個出現字符。如此逐個出現字符後，等待全部打印完畢即可停止打印，如下圖所示。