JavaScript实现状态栏文字滚动效果

作者:拾光

时间:2026-10-30

浏览:158

本文提供一段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程序设计内容对大家有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章