荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: hbo (H.B.), 信区: Java
标 题: (转贴)JavaScript 简介(第 4 集)
发信站: 深大荔园晨风站 (Thu Mar 12 09:41:21 1998), 转信
寄信人: VINCENT
标 题: (转贴)JavaScript 简介(第 4 集)
发信站: 华南理工大学 BBS木棉站
日 期: Tue Oct 15 19:05:37 1996
现在我们来谈谈有关状态列(即是浏览器最下方，通常会出现 URL
的那个地方)的应用，当然这儿也会提到一个最常的应用－所谓
「跑马灯」的制作。虽然这个东西在 JavaSaript 中有点令人讨厌
( 为什么呢？等一下再告诉你）。
首先我们看看如何在状态列上显示文字，以下的例子告诉我们怎么达成
这个功能；你可以按一按以下的按钮！
如何？看到状态列的变化了吗？以下是此一部份的原始语法∶
<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form><input type="button" name="look" value="显示!" onclick="statbar('嗨！，这
是状态列讯息!');">
<input type="button" name="erase" value="清除!" onclick="statbar('');">
</form>
</body>
</html>
在这个例子中我们建了二个按钮，此二个按个均会去呼叫
statbar(txt)
这个函数，函数中的 txt
表示此函数将经由函数呼叫时传一个变数值
进来 (我们叫 txt，
但它可代表任意不同的值)。你可以见到在产生按
钮的 <form> 标签中，呼叫到函数 statbar(txt)。在此我们就不再写成
txt
，直接把要显示在状态列上的文字写上去。於是我们可以见到这样的
效果∶变数 txt 经由 'Value'
中得它的值，然後传入所呼叫的函数中。
所以当你按〃显示〃的按钮时，statbar(txt) 函数被呼叫然後 txt
将读入
字串〃嗨！，这是状态列讯息〃，并且传入函数中。这种经由变数传
递值的方式，可以使函数相当具有可变性。
接著来看第二个按钮〃清除〃，它也呼叫同样的函数，我们并不需要
因为传递参数的不同而言两个不同的函数。所以现在我们可以来看看
statbar(txt) 这个函数做些什么了！其实它相当简单，你只要将 txt
所要
传的文字内容指定给 window.status 这个变数就可以了，即是
window.status=txt。
而在清除状态列的时候，只是将空字串写入即可，不过要注意的是必
须使用单引号及双引号来区别，这样才容易区分。
在第二集中，我们曾提到了 onMouseOver 这个 property:
<a href="tpage.htm" onMouseOver="window.status='Just another stupid
link...'; return true">
当时不知道你觉不觉得当滑鼠不再指到该连结时，状态列的文字仍然
不消除而感到相当讨厌？这儿倒是有个解决办法∶用一个以上所提的
办法写一个清除的函数即可！但，问题来了，这个清除的文字怎么被
呼叫呢？我们并没有一个侦测滑鼠指标离开该连结的 method 或
property
啊？解决方法就是以设定时间的方式。试试这儿 → 指指我吧！
只要将滑鼠指标移动过去即可，不用按滑鼠钮！以下是原始程式，
多看一会儿，你会发现它会比你第一次看到时更容易了解！
<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.htm" onMouseOver="moveover('注意!消失中!');return true;">
link</a>
</body>
</html>
以上的语法你已经了解了大部分了。moveover(txt)
这个函数和前面的
statbar(txt) 几乎是相同的函数，只是从前面剪贴过来修改而已。而
earse()
函数也差不多，在 HTML 文件的部分则是加入了一个 onMouseOver
的连结，当 moveover(txt) 函数被呼叫的时候，会将 注意!消失中!〃
这个字串传给 txt 变数，window.status 取得 txt 的内容後，就如同
statbar(txt) 函数一样了。而 setTimeout(...)
则是用来设定经过多久的时
间後去启动一个动作。在我们的例子中，erase() 这个函数将在 1000
milliseconds (即⒈秒钟 ) 後被呼叫。即 moveover(txt) 这函数在计时器
设定之後即完成结束，然而浏览器将自动在⒈秒钟之後呼叫 erase()
函数。当然，时间到了之後，计时器并不会重新再设定启始一次，
但你可以在 erase() 函数中再呼叫一次（以递回的方式）。这样的作
法可以导致让我们用来制作完全像跑马灯的效果。当你已经知道如
何将讯息写入状态列及如何递回呼叫计时器时，如何制作出跑马灯
效果应该就很容易可以了解了！
按以下的按钮来看看我们所制作的跑马灯效果！
以下即是原始程式∶
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="这儿的讯息可以改为你要告诉别人的话， " "或是注意事项 ...";
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>
<body onLoad="scroll();return true;">
Here goes your cool page!
</body>
</html>
此一程式中我们使用了和上面同样的函数（或部分），setTimeout(...)通知
计时器在时间到时去呼叫 scroll()
函数，使得跑马灯中的文字往前进一格。
在函数的一开始，有一些较罗嗦的计算部分，但这并不难使我们了解。这
些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途
。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右。
然後再一字字的将空白减少，结果自然就造成字往前移动的效果了！
我们在一开始的时候就曾告诉你，「跑马灯」是个麻烦而讨厌的东西
，为什么呢？有几点原因，我们挑几点来说说好了∶首先我们看到这个效
果时，可能会蛮惊奇的，然而当我们一而再，再而三的看到之後，你会觉
得很烦，对不对？！好吧！也许这是你的文件中一项很酷的技巧，算我说
错话了，不过，还有其他的问题存在哪！其中有一项最令人不高兴的就是
滑鼠在移动时会乱跳乱跳，至少我们会如此！
这个情形在当你欲改变跑马
灯速度，而去改变 setTimeout
中的值而使它变快时会更明显。另一个更糟
的问题是∶如果你让跑马灯跑个一阵子之後， 有时你会发生一个
Out of memory error
的错误讯息，这才惨，也许这是 Netscape Navigator 2.0
本身的问题也说不
定，希望 2.01 或 3.0
中能将这个问题解决！在网路上有许多其他不同的
跑马灯，曾看到有将它写入 text
的格子放至视窗框的作法，如此的应用
应是不难做到才是！
第 4 集 完
--
※ 来源:．深大荔园晨风站 bbs.szu.edu.cn．[FROM: 202.192.140.143]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店