javascript跑马灯效果

javascript跑马灯效果,代码如下:

<script type="text/javascript">
var pos=0;
var width=100;
var speed=150;
var msg="欢迎您访问本网站!";
for(i=0;i<width;i++)msg=" "+msg;
function runlight(){
window.status=msg.substring(pos,pos+width);
if(pos++==msg.length-1)pos=0;
window.setTimeout("runlight()",speed);
}
window.onload=runlight();
</script>

解释:
①window.status="把要在状态栏中显示的文本放进这个双引号中",
<script>
window.status="这个双引号里的文本会在状态栏中显示";
</script>
window.status就是将赋给它的值,显示在状态栏中,
status就是状态栏的意思,
赋给window.status的值要使用双引号""进行包裹

②for(i=0;i<width;i++)msg=""+msg;

这个循环for语句很重要,
因为msg有初值var msg="欢迎您访问本网站!";,
所以,循环的作用就是在欢迎您访问本网站!之前加上0~99,
也就是100个空格.
而且,这个for循环一共就只造了100个空格,
因为一共循环了100次,从i=0开始到i=99结束,
一共是100次,
所以最后的msg的值是一百个空格加上欢迎您访问本网站!这句话,
一共是109个字符,

③msg.substring(pos,pos+width);
将上面定义的msg这个字符串变量,
使用.substring方法进行截取,
截取的位置和长度由上面定义的变量pos和width一起决定,
pos是起始位置,其值为0,
pos+width是结束位置,其值为0+100=100,
所以当pos取值为0时,
从msg字串中截取的字串的长度是100,
字串内容是一长串空格,长度是0~99共100个,
msg.substring(pos,pos+width)中pos=0,pos+width=100,

stringObject.substring(start,stop)
从下标start开始,到下标stop结束,包含下标start,但不包含下标stop,

那么,当pos开始自增到值为1时,
字串长度为pos+width-pos=width=100,
字串内容为:1~99共99个空格加上一个欢字,
此时把这个从msg中截出的新字符串赋值给window.status的话,
页面的状态栏就显示了,
99个空格加上一个欢字,
对比pos=0时状态栏显示的100个空格来说,
给人的感觉是,状态栏显示的内容向左移动了一个空格,
msg.substring(pos,pos+width)中pos=1,pos+width=101,

当pos自增到,值为2时,
字串长度还是为pos+width-pos=width=100,
字串的内容为:2~99个共98个空格再加上欢迎两个字,
对比pos=1时,
页面上状态栏给人的感觉是字体开始向左滚动了,
msg.substring(pos,pos+width)中pos=2,pos+width=102,

以此类推,
当pos自增到,值为9时,
我们之前设置的欢迎您访问本网站!9个字全部显示出来,
标点符号也算一个字,
此时,字串的内容是91个空格再加上欢迎您访问本网站!这句话,
一共是100的width,
msg.substring(pos,pos+width)中pos=9,pos+width=109,

而代码for(i=0;i<width;i++)msg=" "+msg;设置了一个初始的字串,
就是一百个空格加上欢迎您访问本网站!,一共是109个字符,
到这里,msg.substring(pos,pos+width)都能正常显示,
msg.substring(pos,pos+width)中起始值pos和结束值pos+width,
都小于整个加了100个空格的初始字串的长度109,

但是,当当pos自增到,值为10,
msg.substring(pos,pos+width)中起始值pos没问题,
而结束值pos+width=110,已经超过字串的长度109了,
怎么办,
没关系,
此时,仍以字串的最大值109作为msg.substring(pos,pos+width)的结束值pos+width,
所以,当前截取的字串长度就不是100了,
而是109-10=99个,
状态栏的整体效果仍然是文本内容向左移动,

那么当pos自增到11时,msg.substring(pos,pos+width)截取的字串长度就是:109-11=98,

当pos=12时,截串长度是97,
当pos=13时,截串长度是96,
当pos=13时,截串长度是96
…
当pos=100时,截串长度是9,欢迎您访问本网站!这句话已经滚动到浏览器的左边框,
当pos=101时,截串长度是8,欢迎您访问本网站!这句话的欢字消失了,剩下迎您访问本网站!
…
当pos=108时,截串长度是1,显示的内容是!,
当pos=109时,截串长度是0什么都不显示,这时是没有意义的,所以,if(pos++==msg.length-1)pos=0这个带自加++循环的判断语句,
将pos的最大值设置为109-1=108,当pos的值超过108后,执行pos=0,
这时候,pos=0,截串长度重新变成pos+width=0+100=100,
显示的内容是一长串空格,长度是0~99共100个,给人的感觉是,当惊叹号!向左滚动消失后,欢迎您访问本网站!这句话又从状态栏上出现了,并向左不停的滚动中,

④window.setTimeout(“runlight()”,speed);
就是

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
语法
setTimeout(code,millisec)

参数 描述

code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
本例中,code是runlight(),millisec是speed(var speed=150)

请注意,setTimeout() 只会调用一次代码code,
为了行程循环,产生跑马灯的效果,
setTimeout() 这里调用了包含它的函数function runlight(),
这样就产生了循环,
每隔150毫秒,setTimeout()就去调用一次 runlight(),
然后window.status将截取的字串msg.substring(pos,pos+width)显示到状态栏,
接着进行判断if(pos++==msg.length-1)pos=0;并将pos自加++,直到pos--msg.length-1时,将0赋值给pos,
最后继续使用代码window.setTimeout("runlight()",speed)进行循环,
产生状态栏跑马灯效果,

⑤window.οnlοad=runlight();

window.onload() 方法用于在网页加载完毕后立刻执行的操作，
即当 HTML 文档加载完毕后，立刻执行某个方法。

至此,状态栏跑马灯代码全部介绍完毕,亲测有效,

January18th2021Mon