JavaScript简介
第四章



这章我将告诉您如何在状态列 (statusbar) (也就是您浏览器最下方显示 URLs 的那一行) 显示文 字，并且将教您 '跑马灯' (以下简称 scroller ) 的工作原理。虽然以 JavaScript 完成的 scroller 目前 仍有些问题 (稍後会提到问题在哪儿?)，但我还是告诉您它是如何写成的。

首先，如何将文字填入 statusbar 呢?下述语法将告诉您如何做到这项功能: (按下按钮後请注视 statusbar 的变化)

很新奇吧! 请看看原始码 : 


<html>

<head>

<script language="JavaScript">

<!-- Hide

function statbar(txt) {

   window.status = txt;

}

// -->

</script>

</head>

<body>

<form>

<input type="button" name="look" value="写入文字" onclick="statbar('嗨 ! 这就是状态
列 (statusbar) !');">

<input type="button" name="erase" value="清除文字" onclick="statbar('');">

</form>

</body>

</html>

我制作了两个都会呼叫 statbar(txt) 函式 (function) 的按钮。当此函式被呼叫後，字串经由括弧中 的变数 txt 传给 statbar(txt)。 (不一定要用 txt，用别的变数名也可以)。当电脑执行到 <form> tag 时， 一旦按下按钮就会呼叫 statbar(txt)。但是电脑并没有马上将 txt 的内容写在 statusbar，只是 将欲显示的字串存入 txt。换句话说，藉由呼叫函式，只是让变数 txt 得到一个值。因此当您按 下 '写入文字' 这个按钮後，会呼叫 statbar(txt) 而且 '嗨 ! 这就是状态列 (statusbar) !' 这个字串会 存入 txt 中。咻 ! 讲了这麽多只是想告诉您这种写法可预留一些弹性。什麽弹性呢?就是您可重 复使用 txt 这个变数。您看看第二个按钮，它也是呼叫相同的函式。若您不利用一个变数来传递 字串的话，就必须写两个不同的函式了。

那麽 statbar(txt) 到底做了些什麽?其实没什麽，只是将 txt 的内容写入变数 window.status中。这 是由 window.status = txt; 做的。另外若想消除文字，只需送一个空字串 ('') 给 statusbar。请注 意，因为在 onClick 中我们已经使用双引号 " ，所以这里必须用单引号 ' 。这是为了让浏览器辨 认哪两个引号是一对的，因此您必需双引号和单引号交替使用。

由此份简介文件第二章您已学过 onMouseOver 的特性了 :
<a href="tpage.html" onMouseOver="window.status='Just another stupid link...'; return true">
您可能会对一件事感到厌烦。那就是当 mouse 的指标已从 link 移开了，但是 statusbar 中的文字 还留在那 !没关系，我教您一个解决的办法。利用上面教您如何消除 statusbar 中文字的方法， 我们来写一个小函式。但是如何侦测出 mouse 的指标已从 link 移开并进而呼叫消除文字的函式 呢?侦测 mouse指标是否已从 link 移出的功能目前还无法达到，但可用 "计时器" 来暂时解决此 问题。

试试将 mouse 移到此 link 上看看 statusbar 的变化，但请不要按它。

怎麽样?很棒吧!看看下面的原始码您就知到这东西很简单。 


<html>

<head>

<script language="JavaScript">

<!-- Hide

function moveover(txt) {

   window.status = txt;

   setTimeout("erase()",1000);

}

function erase() {

   window.status="";

}

// -->

</script>

</head>

<body>

<a href="dontclck.html" onMouseOver="moveover('瞬间即逝 !');return true;">

link</a>

</body>

</html>

这 script 的许多部份相信您已了解。 moveover(txt) 其实和先前的 statbar(txt) 差不多。erase()也和 先前所讨论的相同。在 HTML 网页中的 <body> tag 里我们加入一个具有 onMouseOver 功能之 link。当 mouse 指标移至 "link" 上就会呼叫 moveover(txt)，并且利用 txt 变数传递字串 '瞬间即逝 !'。接下来的步骤就和 statbar(txt) 一样， window.status 收到 txt 的值後将之显示在 statusbar 上。 而 setTimeout(...)这项新函式是用来作为一个 "定时器"。setTimeout(...)能作些什麽事呢?它的主 要特性是当某段设定的时间 "跑" 完了之後，便执行某函式。在这个例子中，於 1000 毫秒後 (也 就是 1 秒後) 就会执行 erase()。换句话说，当 1 秒结束後 moveover(txt) 的功能就会因 erase()的 自动执行而停止。
虽然规定时间 "跑" 完後定时器并不会重新启动，但您可以在 erase() 中再用一次setTimeout(...) ，使其循还不断，看起来就像一个跑马灯 (scroller)。

您已学到了 setTimeout 的功能和如何在 statusbar 中显示文字，接下我将教您如何制作一个在 statusbar 显示的 "跑马灯" (scroller)。

请按下方的按钮看看我做的 scroller。由於 script 需由 server 载入到您的电脑中，因此这要花一 点时间，请耐心等一下。

以下是原始码 : 


<html>

<head>

<script language="JavaScript">

<!-- Hide



var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"Here goes your message the visitors 
to your page will "+

"look at for hours in pure fascination...";

var lentxt=scrtxt.length;

var width=100;

var pos=1-width;



function scroll() {

  pos++;

  var scroller="";

  if (pos==lentxt) {

    pos=1-width;

  }

  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);

  }

  window.status = scroller;

  setTimeout("scroll()",150);

  }

//-->

</script>

</head>

<body onLoad="scroll();return true;">
这里可显示您的网页 !
</body>

</html>

上面 script 用的语法相信大部份您已经懂了。 setTimeout(...) "告诉" 计时器当时间到了就呼叫 scroll()。 如此一来 scroller便会向前移动一步。在 script 的开头有许多计算式，那是用来决定文 字开始显示的位置，了不了解并不重要。一旦决定了文字的启始位置，就必需加些空格 (space) 以使文字能显示在正确位置。

在此章一开始我曾提到，此种 scroller 并不是很受欢迎。即使是，也不会持续很久。为什麽呢? 下面我列出几个主要原因:
当第一次看到 scroller 或许您会觉得很新奇，但久而久之便会觉得索然无味。当然，这是所有 "酷玩意儿" (cool trick) 皆有的现象。
其实这还不是主要原因，更严重的问题还在後头呢 ! 当您移动 mouse 时，您可以发现 scroller 的 速度改变了 (至少在我的机器上是如此)。尤其当您更改 setTimeout 的值为使 scroller 跑快一点时 ，这种情况更严重。不过这问题或许还有解决方法。更糟的是若让 scroller 跑久一点，会出现 Out of memory error的问题 ! 天呀 ! 这是 Netscape Navigator 2.0 的一个 "臭虫" (bug)。我们期待 新的版本能更正此 bug (译按 : Netscape Navigator Atlas Preview Release 已更正此 bug)。

在网路上有许多这方面的应用，您可以试著找找。我曾经看过有人将 scroller 放在 Homepage 中， 这应该不会太难。(译按 : 有兴趣的人可参考目录中本人所制做的 scroller)

返回主页 -