由 amtd 发布于: 2001-02-20 09:26

JavaScript让网页的状态栏变得有些不一样
（作者：廖年旺　2000年11月08日 16:49）

　　在遨游网海的途程中，我们经常发现在打开一些网页的时候，浏览器的状态栏上就会出现各种形式的文本提示，而且提示是动态的，有的眨眼、有的冒泡、还有的排列出现。这种提示不影响浏览的速度，又不影响观看网页，因为它不占据页面的部分，所以很多的主页都应用这种特效。

　　您是否也想在自己的网页中拥有这样的动态状态栏呢？不要急，要实现这样的特效并不很难。

　　下面笔者将逐一介绍这三种动态状态栏。

眨眼式
　　说明：在浏览器打开网页的时候，下面的状态栏就会像眨眼睛似地出现文本提示信息。

　　〈body〉

　　〈table〉

　　〈td align="center"〉〈script language="JavaScript"〉

　　〈!--

　　var yourwords="欢迎光临";

　　var speed=1000;

　　var control=1

　　function flash()

　　{

　　if(control = 1)

　　{window.status=yourwords;

　　control=0

　　}

　　else

　　{

　　window.status="";

　　control=1;

　　}

　　setTimeout("flash();",speed);

　　}

　　flash();

　　〈/script〉〈/td〉

　　〈/body〉

冒泡式
　　说明：在浏览器打开网页的时候，状态栏里的文本就像是冒泡一样，一个字一个字地出现。

　　〈body〉

　　〈table〉

　　〈td align="center"〉〈script language="JavaScript"〉

　　〈!--

　　var msg="欢迎光临";

　　var interval=300

　　var spacelen=120

　　var space10="";

　　var seq=0;

　　function Scroll()

　　{

　　len=msg.length;

　　window.status=msg.substring(0,seq+1);

　　seq++;

　　if (seq〉=len){

　　seq=0;

　　window.status='';

　　window.setTimeout("Scroll();",interval);

　　}

　　else

　　window.setTimeout("Scroll();",interval);

　　}

　　Scroll();

　　〈/Script〉〈/td〉

　　〈/body〉

排列式
　　说明：在浏览器打开网页的时候，状态栏显示的文本文字排列出现。

　　〈html〉

　　〈head〉

　　 〈title〉status bar〈/title〉

　　〈/head〉

　　〈script language="javaScript"〉

　　〈!--

　　//创建一个自定义的对象类型

　　function statusMessageObject(m,p,d){

　　this.msg=m

　　this.out=""

　　this.pos=p

　　this.delay=d

　　this.i =0

　　this.reset=clearMessage

　　}

　　//清除状态栏信息的函数

　　function clearMessage(){

　　this.pos=POSITION

　　}

　　//初始化位置，延迟和状态栏信息

　　var POSITION=100

　　var DELAY=5

　　var MESSAGE="欢迎你！"

　　//创建statusMessageObject的实例

　　var scroll =new statusMessageObject(MESSAGE,POSITION,DELAY)

　　//字符滚动变幻的主函数

　　function change(jumpSpaces,position){

　　var msg=scroll.msg

　　var out=""

　　//下面的程序主要靠控制空格的个数来实现字符的移动

　　for(var i=0;i〈position;i++)

　　{out+=msg.charAt(i)}

　　for(i=1;i〈jumpSpaces;i++)

　　{out+=""}

　　out+=msg.charAt(position)

　　window.status=out

　　if(jumpSpaces〈=1){

　　position++

　　if(msg.charAt(position)=='')

　　{position++}

　　　　　　 jumpsSpaces=100-position

　　} else if(jumpSpaces〉3)

　　{jumpSpaces*=.75}

　　else

　　{jumpSpaces--}

　　//如果信息滚动完毕则重新执行一遍

　　if(position!=msg.length){

　　var cmd="change("+jumpSpaces+","+position+")";

　　scro11ID=window.setTimeout(cmd,scroll.delay);

　　}else{

　　//使所有信息重新复位

　　window.status=""

　　jumpSpaces=0

　　position=0

　　cmd="change("+jumpSpaces+","+position+")";

　　scro11ID=window.setTimeout(cmd,scroll.delay);

　　return false

　　}

　　return true

　　}

　　//--〉

　　〈/script〉

　　〈BODY BACKGROUND="temp.jpg" ONLOAD="change(100,0)"〉

　　〈/BODY〉

　　〈/HTML〉

　　注意，第三种方法中使用的“temp.jpg”图像文件可以随自己喜好选择一幅。

　　只要将以上三种的其中一种代码放到你的主页，就可以实现动态状态栏了。以上三种动态状态栏的提示内容都可以根据自己喜好自行修改。通过上面几个简单的特效实例，你自己也可以设计出更多这样的特效形式状态栏，形成您自己的特殊风格。
__________________