?? javascr4.html
字號:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb_2312-80">
<title>網頁教學網->>免費教程</title>
<link rel="stylesheet" type="text/css" href="samp.css">
<script language="JavaScript">
<!-- Hide
function 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 background="backgr.gif">
<table border="0" WIDTH="750" valign=top>
<tr>
<td width="150" valign=top><br><br><br>
<br>
</td><td width="150">
</td><td width="450">
<br>
<h1 align="center" size="6">第 4 集</h1>
<HR WIDTH="100%" ALIGN="center" >
<p>
<br>
<TABLE><TR><TD>
<p>
這章我將告訴您如何在狀態列 (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">
<!-- 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>
</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="webjx.com" onMouseOver="window.status='Just another stupid link...';
return true">
<br>
您可能會對一件事感到厭煩。那就是當 mouse 的指標已從 link 移開了，但是 statusbar 中的文字
還留在那 !沒關系，我教您一個解決的辦法。利用上面教您如何消除 statusbar 中文字的方法，
我們來寫一個小函式。但是如何偵測出 mouse 的指標已從 link 移開并進而呼叫消除文字的函式
呢?偵測 mouse指標是否已從 link 移出的功能目前還無法達到，但可用 "計時器" 來暫時解決此
問題。
<p>
試試將 mouse 移到此 <a href="webjx.com" onMouseOver="moveover('瞬間即逝 !'); return true;">link</a> 上看看 statusbar 的變化，但請不要按它。
<p>
怎麼樣?很棒吧!看看下面的原始碼您就知到這東西很簡單。
<p>
<pre>
<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>
</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">
<!-- 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>
</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 align=center><a href=./index.htm>[返回]</a></p>
</td></tr></table>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -