当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

完成文字的打字效果的JS代码如何写

完成文字的打字效果的JS代码如何写

更新时间:2023-06-22 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

文字的打字效果

【实例描述】

打字效果是将一段文本逐个文字地显示,实现打字的效果。本例学习如何制作这样的特效。


【实例代码】

   <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>标题页</title>  <script language=javascript> var layers =document.layers; var style=document.all; var both=layers||style; var idme=908601; if(layers) { layerRef='document.layers';styleRef ='';} if(style) { layerRef='document.all';styleRef = '.style';} //开始参数的定义 function writeOnText(obj,str) { if(layers)with(document[obj]) { document.open();document.write(str);document.close();} if(style)eval(obj+'.innerHTML=str');  } var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本 var overMe=0; //逐字显示的方法 function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd) { var mystr='',strchar=''; var skip=200; if (both && idx<=str.length) { if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;} if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;} mystr = str.slice(0,idx);   //返回数组从开始到指定位置的字符串 strchar = 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(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2 +"'>"+strchar+"</font></span>"); setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}} function init() {txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);} </script>

需要在body中,添加一个div,代码如下所示: <BODY onload=init()> <DIV class=style1 id=div1></DIV> </BODY> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点其实是实现这种效果的思路,代码并不是关键。在本例中,要实现一段文本的打字特效,首先将这段文本放在数组中,然后利用两个变量,实现打字和显示的效果,“打字”变量只是显示光标当前的某个字符,而“显示”变量则显示当前光标前所有的字符。

【源码下载】

本实例JS代码下载


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html