怎样用JavaScript制作打字效果的文字特效 / 木子杰软件教程

文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效，文字一个一个地打印在页面上。
本节代码主要使用了 onMousedown 事件和 event.button 属性，主要功能和用法如下。

步骤/方法

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 = 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("javascript源码大全"); //字符串数组 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 /> <br /> <div class="ttll" id="tt10"></div> </center> </body> </html>
04

运行该程序后，页面出现一个提示信息，然后逐个出现字符。如此逐个出现字符后，等待全部打印完毕即可停止打印，如下图所示。

怎样用JavaScript制作打字效果的文字特效

步骤/方法

相关推荐