📄 javascr4.html
字号:
<html><head><title>JavaScript 第 四 集</title><script language="JavaScript"><!-- Hidefunction WinOpen(url) { msg=open(url,"DisplayWindow","toolbar=no,directories=no,menubar=no,status=yes");}function statbar(txt) { window.status = txt;}function moveover(txt) { window.status = txt; setTimeout("erase()",1000);}function erase() { window.status="";}function stat(txt) { window.status = txt; setTimeout("erase()",1500);}// --></script></head><BODY bgcolor="ffffff" link=#ff0000 vlink=#4444dd alink=#9999dd><center><a name="status"></a><img src="java.gif" ><br><font size=+2 color=#FF0000><br>第四集</center></a></font><p><HR WIDTH="80%" ALIGN="center" SIZE="2"><p><br><br><CENTER><TABLE><TR><TD><font size=+1>这章我将告诉您如何在状态列 (statusbar) (也就是您浏览器最下方显示 URLs 的那一行) 显示文字，并且将教您 '跑马灯' (以下简称 scroller ) 的工作原理。虽然以 JavaScript 完成的 scroller 目前仍有些问题 (稍後会提到问题在哪儿?)，但我还是告诉您它是如何写成的。<br><br>首先，如何将文字填入 statusbar 呢?下述语法将告诉您如何做到这项功能: (按下按钮後请注视 statusbar 的变化)<p><form><input type="button" name="look" value="写入文字" onclick="statbar('嗨 ! 这就是状态列 (statusbar) !');"><input type="button" name="erase" value="清除文字" onclick="statbar('');"></form>很新奇吧! 请看看原始码 :<p><pre><html><head><script language="JavaScript"><!-- Hidefunction 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></pre><p>我制作了两个都会呼叫 statbar(txt) 函式 (function) 的按钮。当此函式被呼叫後，字串经由括弧中的变数 txt 传给 statbar(txt)。 (不一定要用 <i>txt</i>，用别的变数名也可以)。当电脑执行到 <form> tag 时， 一旦按下按钮就会呼叫 statbar(txt)。但是电脑并没有马上将 <i>txt</i> 的内容写在 statusbar，只是将欲显示的字串存入 <i>txt</i>。换句话说，藉由呼叫函式，只是让变数 txt 得到一个值。因此当您按下 '写入文字' 这个按钮後，会呼叫 statbar(txt) 而且 '嗨 ! 这就是状态列 (statusbar) !' 这个字串会存入 txt 中。咻 ! 讲了这麽多只是想告诉您这种写法可预留一些弹性。什麽弹性呢?就是您可重复使用 txt 这个变数。您看看第二个按钮，它也是呼叫相同的函式。若您不利用一个变数来传递字串的话，就必须写两个不同的函式了。<br><br>那麽 statbar(txt) 到底做了些什麽?其实没什麽，只是将 txt 的内容写入变数 window.status中。这是由 <i>window.status = txt;</i> 做的。另外若想消除文字，只需送一个空字串 ('') 给 statusbar。请注意，因为在 onClick 中我们已经使用双引号 " ，所以这里必须用单引号 ' 。这是为了让浏览器辨认哪两个引号是一对的，因此您必需双引号和单引号交替使用。<p><a name="erase"></a>由此份简介文件第二章您已学过 onMouseOver 的特性了 :<br><a href="tpage.html" onMouseOver="window.status='Just another stupid link...'; return true"><br>您可能会对一件事感到厌烦。那就是当 mouse 的指标已从 link 移开了，但是 statusbar 中的文字还留在那 !没关系，我教您一个解决的办法。利用上面教您如何消除 statusbar 中文字的方法，我们来写一个小函式。但是如何侦测出 mouse 的指标已从 link 移开并进而呼叫消除文字的函式呢?侦测 mouse指标是否已从 link 移出的功能目前还无法达到，但可用 "计时器" 来暂时解决此问题。<p>试试将 mouse 移到此 <a href="dontclck.html" onMouseOver="moveover('瞬间即逝 !'); return true;">link</a> 上看看 statusbar 的变化，但请不要按它。<p>怎麽样?很棒吧!看看下面的原始码您就知到这东西很简单。<p><pre><html><head><script language="JavaScript"><!-- Hidefunction 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></pre><p>这 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()的自动执行而停止。<br>虽然规定时间 "跑" 完後定时器并不会重新启动，但您可以在 erase() 中再用一次setTimeout(...)，使其循还不断，看起来就像一个跑马灯 (scroller)。 <p><HR WIDTH="80%" ALIGN="center" SIZE="2"><p><a name="scroller"></a>您已学到了 setTimeout 的功能和如何在 statusbar 中显示文字，接下我将教您如何制作一个在statusbar 显示的 "跑马灯" (scroller)。<p>请按下方的按钮看看我做的 scroller。由於 script 需由 server 载入到您的电脑中，因此这要花一点时间，请耐心等一下。<p><form><input type="button" name="Button" value="跑马灯 (Scroller)" onclick="WinOpen('scroller.html')"></form><p>以下是原始码 :<p><pre><html><head><script language="JavaScript"><!-- Hidevar 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></pre><p>上面 script 用的语法相信大部份您已经懂了。 setTimeout(...) "告诉" 计时器当时间到了就呼叫 scroll()。 如此一来 scroller便会向前移动一步。在 script 的开头有许多计算式，那是用来决定文字开始显示的位置，了不了解并不重要。一旦决定了文字的启始位置，就必需加些空格 (space) 以使文字能显示在正确位置。<p>在此章一开始我曾提到，此种 scroller 并不是很受欢迎。即使是，也不会持续很久。为什麽呢?下面我列出几个主要原因:<br>当第一次看到 scroller 或许您会觉得很新奇，但久而久之便会觉得索然无味。当然，这是所有"酷玩意儿" (cool trick) 皆有的现象。<br>其实这还不是主要原因，更严重的问题还在後头呢 ! 当您移动 mouse 时，您可以发现 scroller 的速度改变了 (至少在我的机器上是如此)。尤其当您更改 setTimeout 的值为使 scroller 跑快一点时，这种情况更严重。不过这问题或许还有解决方法。更糟的是若让 scroller 跑久一点，会出现 <i>Out of memory error</i>的问题 ! 天呀 ! 这是 Netscape Navigator 2.0 的一个 "臭虫" (bug)。我们期待新的版本能更正此 bug (译按 : Netscape Navigator Atlas Preview Release 已更正此 bug)。<p>在网路上有许多这方面的应用，您可以试着找找。我曾经看过有人将 scroller 放在 Homepage 中，这应该不会太难。(译按 : 有兴趣的人可叁考目录中本人所制做的 scroller)</TD></TR></TABLE></CENTER><p><HR WIDTH="80%" ALIGN="center" SIZE="2"><p><center><h4><a href="index.html" onMouseOver="stat('回到主页'); return true">回主目录</a> </h4></center><p><br><i>原作最後更新: 25.Feb.'96<br>© 1996 by Stefan Koch<br>译作最後更新:1996年5月16日<br>© 1996 由 <font color=red>段喜亭</font> 翻译</i><br><br></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -