搜豹网络学堂

状态条和定时设置

状态条
JavaScript 程序能对状态条(浏览器窗口的底部部分)进行写操作。你所要做的只需在window.status中指定一个字符串。下面的例子显示了两个按钮，一个对状态条进行写操作，另一个用来清除写入的字符串。

这段 script 语言是这样的：
<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<form>
<input type="button" name="写入" value="Write"
onClick="statbar(' This is the statusbar!');">
<input type="button" name=" 清除" value="Erase"
onClick="statbar('');">
</form>
</body>
</html>

我们生成了两个按钮。它们都调用了函数statbar()。下面是Write按钮调用这个函数的代码：statbar('This is the statusbar!');

在单括号中我们指定使用了字符串'This is the statusbar!'。这意味着是这个字符串被函数statbar()使用。我们是这样定义statbar()这个函数的：

function statbar(txt) {
window.status = txt;
}

在函数的定义中我们在函数名后面的单括号中使用了txt。这也就是说我们传递给函数的字符串储存在变量txt中。

参数的传递可以使函数的应用范围更广。你可以同时传递几个参数给函数，只需在参数间用逗号分开。

txt中的字符串通过使用window.status=txt可以显示在状态条上。

而擦去状态条上的字符串只需在window.status中指定一个空字符串就可以了。

在状态条上显示的文字可以同连接结合起来使用。你可以在状态条上简单介绍将要载入的页的内容。这个连接是一个演示，你只需把你的鼠标移到它的上面。这个例子的代码是这样的：

这儿我们使用 onMouseOver和 onMouseOut来监测鼠标是否移到连接上。

在onMouseOver中使用return true是为了不要让浏览器不要在MouseOver事件中使用它自己的代码。一般来说，浏览器会在状态条上显示连接的URL地址。如果我们不使用return true那么浏览器会在执行了我们的代码后在状态条中直接写入它的URL地址-这也就是说浏览器会覆盖我们的文字，用户无法读到它。一般来说我们能通过使用return true来阻止浏览器的事件处理器中的反应。

在JavaScript1.0中并没有onMouseOut事件。如果你在使用NetscapeNavigator2.x版本那在不同的平台上你也许会得到不同的结果。在UNIX平台上即使浏览器不认识onMouseOut，状态条上的文字也会消失。在Windows中文字不会消失。如果你想使你的script程序对Windows上的Netscape2.x也保持兼容，你就需要写一个函数把文字写入到状态条上，然后在一段特定的时间后把它擦去。这是一个关于定时设置的编程问题。在以后的段落中我们将要学习到更多关于定时设置的内容。

定时设置

通过使用定时设置你可以让计算机在一定的时间后运行另一段代码。我制作了一个按钮，如果你按下它，在三秒后会弹出一个窗口：

源代码是这样的：

<!-- hide

function timer() {

setTimeout("alert('Time is up!')", 3000);

}

// -->

</script>

...

<form>

</form>

setTimeout() 是 window

对象的一个方法。它作了一个定时设置，对这我想你也猜到了吧。第一个参数是在特定的时间后将要被执行的JavaScript代码。在这里是用"alert('时间到了')"。清记住输出代码必须在引号中。

第二个参数是告诉计算机在多少时间后这段代码将被执行。你必须以毫秒为单位来制定。（3000毫秒＝3秒）

卷动

现在你已经知道如何写入到状态条和如何设置定时，现在让我们来看看滚动。也许你早就见过在状态条上滚动的文本字符串，它们在Internet网上到处都是。我们来学一下如何编写一个基本的滚动。然后我们来看看如何改善滚动的效果。

滚动很容易实现。首先我们在滚动条上写入一些文字，然后在一小段时间后我们在状态条上再次写入这段文字－只不过位置向左边移了一点。如果我们一遍一遍重复这样的步骤，用户看到的就是一段在滚动的文字了。

我们还必须确定当文字的长度超过状态条时，哪一段文字会显示出来。

这个按钮会生成一个新的窗口，并显示一个在状态条上的滚动：

这儿是源代码，我加了一些注解：

<html>

<head>

<!-- hide

// define the text of the scroller

var scrtxt = "This is JavaScript! " +

"This is JavaScript! " +

"This is JavaScript!";

var length = scrtxt.length;

var width = 100;

var pos = -(width + 2);

function scroll() {

// display the text at the right position and set a timeout

// move the position one step further

pos++;

// calculate the text which shall be displayed

var scroller = "";

if (pos == length) {

pos = -(width + 2);

}

// if the text hasn't reached the left side yet we have to

// add some spaces - otherwise we have to cut of the first

// part of the text (which moved already across the left border

if (pos < 0) {

for (var i = 1; i <= Math.abs(pos); i++) {

scroller = scroller + " ";}

scroller = scroller + scrtxt.substring(0, width - i + 1);

}

else {

scroller = scroller + scrtxt.substring(pos, width + pos);

}

// assign the text to the statusbar

window.status = scroller;

// call this function again after 100 milliseconds

setTimeout("scroll()", 100);

}

// -->

</script>

</head>

Your HTML-page goes here.

</body>

</html>

scroll()

函数的主要部分是用来计算文本的哪一部分将要显示出来。我并没有详细的解释这段代码，你只需了解滚动是怎么工作的就可以了。

为了启动滚动我们在<body>标记符中使用了onLoad事件处理器。这意味着scroll()函数在HTML页一被载入就运行了。

我们通过onLoad调用scroll()函数。第一步是计算以及显示滚动的文字。在函数的最后作了一个定时设置。这会使scroll()函数在100毫秒后再次被执行，文字向左移动了一点同时另一个定时设置启动了。这些步骤不停的被执行。

（这样的滚动在NetscapeNavigator2.x的版本上会引起一些问题。它会引起一个“Outofmemort"错误。人们一般认为这是因为函数scroll()作了递归调用引起的，最后引起内存溢出。但这是不正确的这并不是一个递归调用！只有当我们在scroll()函数中调用scroll()函数时才是递归调用。我们并没有这样做。旧的函数设置的定时在新的函数运行前已经结束了。问题是在Javascript中字符串并没有真的改变如果你要继续做下去的话，Javascript后生成一个新的对象，并没有移去旧的，这才是充满内存的东西。）

滚动在Internet世界中被广泛的使用。这会使他们冒不受欢迎的危险。我并不喜欢滚动。特别是当鼠标移到一个连接上，这会使本来显示在状态条上的URL不可阅读。这可以通过使用当MouseOver对象发生时，停止滚动；onMouseOut事件发生时继续滚动来避免。如果你要使用滚动，那不要使用普通的滚动，试着加入一些好的效果。象文本的一部分从左边滚过来，文本的另一部分从右边滚过来，当它们在中间会合时停留几秒钟。有一些想象力，你会产生很多好的主意。

回到JavaScript教程目录