关闭→
当前位置:趣知常识网>游戏数码>电脑>怎样用JavaScript制作打字效果的文字特效

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

趣知常识网 人气:2.21W

文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效,文字一个一个地打印在页面上。
本节代码主要使用了 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)运行该程序后,页面出现一个提示信息,然后逐个出现字符。如此逐个出现字符后,等待全部打印完毕即可停止打印,如下图所示。

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

特别提示

各平台浏览器下实现的显示的不同情况

TAG标签:#javascript #文字特效 #打字 #