电脑报精华 · 2002 年 · wl123

JavaScript技巧集锦

杨鸣·约 4,246 字

JavaScript技巧集锦

1.如何用鼠标控制Web页面
在这一部分首先要为你展示的JavaScript特性是将你的鼠标移到不同的连结上面，此时看到浏览器下的状态栏的结果，然后这样的功能我们可以与JavaScript的功能相结合。怎样做到的呢？以下就是这一个连结的作法:
＜a href="tpage.htm" onMouseOver="window.status='Just another stupid link'; return true"＞
在这儿你只要在传统＜a＞的标签中加入 onMouseOver 的 method就可达成你要的效果了。这里的 window.status 是用来让你可以在 WWW 浏览器的状态栏上显示一些讯息。
在语法中，你可以看到讯息部分是用“,”括起来的部分，而非以 " 括起来。在讯息部分结束之后，必须加上“；”、“return true”。好了，利用以上的特性可以很简单的完成第二个连结的例子，相当简单。以onMouseOver 的 method ，然后配合事件发生时去呼叫函数 hello() 就行了，不再多加解释了。　
作法如下:　
＜html＞
　＜head＞
　＜script language="JavaScript">
　＜!-- Hiding
　function hello()
{
　alert("哈罗!");
}
　＜/script＞
　＜/head>
　＜body>
　＜a href=""＞link＜/a＞
　＜/body＞
　＜/html＞
2.在页面内加入日期
我们要告诉你一个使用日期和时间的例子，是从你个人客户端机器获取日期和时间。
做法如下：
＜script language="JavaScript"＞
＜!-- Hiding
today = new Date() ;
document、write("现在时间是 "，today.getHours()，":"， today,getMinutes()) ;
document.write("＜br＞今天日期为 "， today.getMon()+1，
"/",today.getDate(),"/",today.getYear();
// end hiding contents --＞
＜/script＞
在本例中，我们必需首先建立一个日期变数，这可以由 today= new Date()来完成。如果没有特别指定时间与日期的话，浏览器将会采用本地客户端机器的时间。若将它放入变数 today中，这儿要注意的是，我们并没有定义today这个变数的型态。
除以上功能外，在建立日期物件时你也可以事先设定日期如下：
docStarted= new Date(96，0，13)
首先是年，接着是月（记得减1），再接着是日。同样的方法也可以加上时间的设定。如下:
docStarted = new Date(96，0，13，10，50，0)
前三个是日期的年、月、日，接着是时、分、秒。最后，我们必须提醒你JavaScript 并没有实际的日期型态，但是它却能毫不费力地显示出日期和时间，原因是它是从 1 / 1 / 1970 00h 开始以ms(milli seconds) 来计算目前的时间的，这听起来似乎有些复杂。但你倒不用担心，它有标准的共用函数可以计算，你只要知道如何用就可以了。
3.在网页上使用history和forward
我们来看一个可以让你浏览不同文件的语法，我们这儿所要谈的是back()和forward()这两个函数，如果你本身的文件中有一个连结是回到你本身文件的上一个连结文件的话，那和Netscope浏览器中所提供的back按钮功能是不一样的。例如，在我的文件中，正常的链接连到某些我们认为会是这个文件来源的地方，称这个链结叫back，而 Netscape 浏览器中的 back按钮，则是回到你历史记录中的上一个链接。JavaScript也能提供类似 Netscape 中back按钮的功能，试试这个链接，你可以体会一下回来的感觉，这个语法如下所示：
＜html＞
　＜body＞
　＜FORM NAME="buttonbar"＞
　＜INPUT TYPE="button" VALUE="Back" onClick="history. back()"＞
　＜INPUT TYPE="button" VALUE="JS- Home" onClick="location= 'script.htm'"＞
　＜INPUT TYPE="button" VALUE="Next" onCLick="history. forward()"＞
　＜/FORM＞
　＜/body＞
　＜/html＞
以上你也可以直接写成 history.go(-1) 与 history.go(1)。
4.使用运算函数
eval这是一个特殊的内建函数，它能把运算式子作为其参数运算元，并回传一个值。这函数对于运算一个数值字符串而言非常有用。举例来看，从FORM所输入的值总是字符串，但你也许想要拿来运算，那该怎么办？
下面的这一个例子包函了输入的文字栏位，应用的运算函数和显示结果的另一区块。假如你在第一个栏位打了一个数值运算式，并且按下了按钮，运算式便会开使运算。
＜SCRIPT＞
　function compute(obj)
{
　obj.result.value = eval(obj.expr.value) ；
　}
　＜/SCRIPT＞
　＜FORM NAME="evalform"＞
　Enter an expression:：
　＜INPUT TYPE=text NAME="expr" SIZE=20＞
　＜BR>
　Result: ＜INPUT TYPE=text NAME="result" SIZE=20＞
　＜BR>
　＜INPUT TYPE="button" VALUE="Click Me"
　onClick="compute(this.form)"＞
　＜/FORM＞
5.跑马灯效果
＜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()函数，使得跑马灯中的文字往前进一格。在函数的一开始，有一些较罗嗦的计算部分，但理解起来并不困难，这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，结果自然就造成字往前移动的效果了。
6.产生乱数
接下来我们要为你介绍一个可以产生乱数的函数，这个函数只是利用了一点小技巧而已。而这种乱数在大部分的编译器(compiler)中大都是如此（或类似）计算出乱数来的。相信 JavaScript最后应也会以相似的方法来产生这样的method。以下是此函数的结果：
这是一个计算产生的乱数：3861138662928667。
以下是这个程序的代码：　
＜head＞
＜script language="LiveScript"＞
　　　function RandomNumber()
{
　　　today = new Date();
　　　num = Math.abs(Math.sin(today.getTime()));
　　　return num;
　}
　＜/script＞
　＜/head＞
　＜body＞
　＜script language="LiveScript"＞
　＜!--
　document.write("This is a random number:",
　RandomNumber());
　// --＞
　＜/script＞
　＜/body＞
　＜/html＞
我们的做法是用上一个范例中的时间函数，它会出现一个很大的数，利用这个数再加以运算即可。例如：将它拿来做正弦函数（sin）的运算，得到的数再做绝对值的运算，结果可以得到一个介于 0 与 1 间的实数，因为时间的改变是以ms为单位，所以你绝不会获得相同的数字。不过这个做法并不适合拿来快速的连续产生一系列的乱数，但如果你是不定时或久久的用一次，那效果就不错了。
7.自动加上最后修改时间
我们在HTML文件档完成了以后，常会加上一行文件最后修改的日期。现在你不用担心每次都要去改或是忘了改了，你可以很简单的写一个如下的描述语法程序。这个程序可以自动的为你每次产生最后修改的日期了。
＜html＞
＜body＞
This is a simple HTML- page。
＜br＞
Last changes:
＜script language="LiveScript"＞
＜!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents --＞
＜/script＞
＜/body＞
＜/html＞

（杨鸣）