|
|
Javascript教程篇 第 4 集 这章我将告诉您如何在状态列 (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
这个变数。您看看第二个按钮, 它也是呼叫相同的函式。若您不利用一个变数来传递 字串的话, 就必须写两个不同的函式了。 由此份简介文件第二章您已学过 onMouseOver 的特性了 : 试试将 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()的 自动执行而停止。 您已学到了 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 放在 Homepage 中, 这应该不会太难。(译按: 有兴趣的人可叁考目录中本人所制做的 scroller) |
||||||||