JavaScript程序设计基础教程实训指导-10-10 实训案例名称：实现文字闪动效果.docxVIP

实训案例名称：实现文字闪动效果

本实例使用JavaScript制作闪动的波浪文字效果，涉及的JavaScript语法如下。

1．parseInt()函数

parseInt()函数的语法是：parseInt(number,type)，number为要转换的字符串，type表示进制类型，如果不指定type，type值以0x开头时，为十六进制；以0开头且第二位不为x，则认为是八进制。

2．setTimeout()方法

setTimeout()有两种形式，分别是setTimeout(code,interval)和setTimeout(func,interval,args)，其中code是一个字符串；func()是一个函数；interval表示时间，可以是延迟时间或者交互时间，以毫秒为单位。延迟时间是在载入后延迟指定时间后去执行一次表达式，仅执行一次；交互时间是从载入后每隔指定的时间就执行一次表达式。

3．InnerHTML

几乎所有的元素都有InnerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。

示例代码如脚本10-10所示。

脚本10-10.html

!DOCTYPEhtml

html

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8

titleJs文字闪动效果/title

/head

body

divid=container

/div

/body

scripttype=text/javascript

functiongetTextSize(i,incMethod,textLength){

if(incMethod==1){

return(32*Math.abs(Math.sin(i/(textLength/3.14))));

}

if(incMethod==2){

return(255*Math.abs(Math.cos(i/(textLength/3.14))));

}

}

functionchangeTextSize(text,method,dis){

output=;

for(i=0;itext.length;i++){

size=parseInt(getTextSize(i+dis,method,text.length));

output+=fontstyle=font-size:+size+pt+text.substring(i,i+1)+/font;

}

varcontainer=document.getElementById(container);

container.innerHTML=output;

}

functionrun(n){

varcontent=======欢迎分享JavaScript======;

changeTextSize(content,1,n);

if(ncontent.length){n=0}

setTimeout(run(+(n+1)+),50);

}

window.onload=run(0);

/script

/html

网页显示效果如图10.10所示。

图10.10文字闪动效果