JavaScript实现状态栏文字滚动效果
作者:拾光时间:2026-10-30 02:40:50浏览:159
本文提供一段JavaScript代码,实现浏览器状态栏的文字滚动效果。文字内容定义在数组中,支持自定义修改。代码针对早期浏览器环境设计,包含定时器控制滚动速度,适合学习基础JS DOM操作与定时器用法。
状态栏文字滚动效果实现
本文介绍了一种使用JavaScript实现状态栏文字滚动效果的方法,供读者参考。
该效果通过数组定义滚动文字内容,用户可根据需要自行修改。需要注意的是,此代码在IE8等较老浏览器中可能存在兼容性问题,欢迎JavaScript爱好者提供修正版本。状态栏是效果的显示区域。
运行效果截图如下:

在线演示地址如下:
http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/
具体代码如下:
<HTML>
<HEAD>
<TITLE>间隔状态栏跑马灯</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=JavaScript>
<!--
function scrollit(seed) {
var m1 = "HI:你 好! ";
var m2 = "欢迎访问本站网站";
var m3 = "请 多 提 意 见,谢 谢!";
var m4 = "E-MAIL:";
var m5 = "/";
var msg=m1+m2+m3+m4+m5;
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
window.status=out;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
window.status=out;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit(100)",75);
}
}
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR>
</HEAD>
<BODY bgColor=#fef4d9 onload=scrollit(100)>
</BODY>
</HTML>
希望本文所述的JavaScript程序设计内容对大家有所帮助。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
