最新JavaScript小技巧全集

《最新JavaScript小技巧全集》由会员分享，可在线阅读，更多相关《最新JavaScript小技巧全集（8页珍藏版）》请在装配图网上搜索。

1、精品资料JavaScript小技巧全集.JavaScript 小技巧全集（一）第一集如何用滑鼠控制Web页面 在这一部分首先要为你展示的JavaScript特性是将你的滑鼠移到这个不同颜色的连结上面，此时看看浏览器下的状态列有何结果，然后这样的功能我们可以与JavaScript的功能相结合。怎样做到的呢以下就是这一个连结的作法: ahref=tpage.htmonMouseOver=window.status=Justanotherstupidlink.;returntrue 在这儿你只要在传统a的标签中加入onMouseOver的method就可达成你要的效果了。这里的window.stat

2、us是用来让你可以在WWW浏览器的状态列上显示一些讯息用的。 在语法中，你可以看到讯息部分是用括起来的部分，而非以括起来。在讯息部分结束之后，必须加上;returntrue。好了，利用以上的特性可以很简单的完成第二个连结的例子，相当简单。以onMouseOver的method，然后配合事件发生时去呼叫函数hello()就行了，不再多加解释了。 作法如下 html head scriptlanguage=LiveScript !-Hiding functionhello() alert(哈罗!); /script /head body ahref=onMouseOver=hello()link/

3、a /body /html 第二集如何在页面内加入日期 我们要告诉你一个使用日期和时间的例子，是从你个人客户端机器获取日期和时间。 做法如下： scriptlanguage=LiveScript !-Hiding today=newDate() document.write(现在时间是,today.getHours(),:, today.getMinutes() document.write(br今天日期为,today.getMonth()+1, /,today.getDate(),/,today.getYear(); /endhidingcontents- /script 在本例中，我们必需

4、首先建立一个日期变数，这可以由today=newDate()来完成。如果没有特别指定时间与日期的话，浏览器将会采用本地客户端机器的时间。若将它放入变数today中，这儿要注意的是，我们并没有宣告today这个变数的型态。 除以上功能外，在建立日期物件时你也可以事先设定日期如下： docStarted=newDate(96,0,13) 首先是年，接着是月（但记得减1）,再接着是日。同样的方法也可以加上时间的设定。如下 docStarted=newDate(96,0,13,10,50,0) 前三个是日期的年、月、日，接着是时、分、秒。最后，我们必须提醒你JavaScript并没有实际的日期型态，但

5、是它却能毫不费力地显示出日期和时间，原因是它是从1/1/197000h开始以ms(milliseconds)来计算目前的时间的，这听起来似乎有些复杂。但你倒不用担心，它有标准的共用函数可以计算，你只要知道如何用就可以了。 第三集如何在网页上使用history和forward 我们来看一个可以让你浏览不同文件的语法，我们这儿所要谈的是back()和forward()这两个函数，如果你本身的文件中有一个连结是回到你本身文件的上一个连结文件的话，那和Netscope浏览器中所提供的back按钮功能是不一样的。例如，在我的文件中，正常的连结连到某些我们认为会是这个文件来源的地方,称这个连结叫back，

6、而Netscape浏览器中的back按钮，则是回到你历史记录中的上一个连结，所以不同JavaScript，也能提供类似Netscape中back按钮的功能，试试这个连结，你可以体会一下回来的感觉，这个语法如下所示： html body FORMNAME=buttonbar INPUTTYPE=buttonVALUE=BackonClick=history. back() INPUTTYPE=buttonVALUE=JS-HomeonClick=location= script.htm INPUTTYPE=buttonVALUE=NextonCLick=history. forward() /F

7、ORM /body /html 以上你也可以直接写成history.go(-1)与history.go(1) 第四集如何使用运算函数 这是一个特殊的内建函数eval包括了运算式子为其参数,运算元,并回传一个值.这函数对于运算一个表示的数值字串而言非常有用,举例来看,从FORM所输入的值总是字串,但你也许想要拿来运算,那我该怎么办? 下面的这一个例子包函了输入的文字栏位,应用的运算函数和显示结果的另一区块.假如你打了一个数值运算式在第一个栏位,并且按下了按钮,运算式便会开使运算, SCRIPT functioncompute(obj) obj.result.value=eval(obj.expr

8、.value) /SCRIPT FORMNAME=evalform Enteranexpression: INPUTTYPE=textNAME=exprSIZE=20 BR Result:INPUTTYPE=textNAME=resultSIZE=20 BR INPUTTYPE=buttonVALUE=ClickMe onClick=compute(this.form) /FORM 以下是原始语法 HTML HEAD TITLE浏览器的状态栏/TITLE /HEAD BODYBGCOLOR=#FFFFFF SCRIPTlanguage=JavaScript !-Hide functionsta

9、tbar(txt) window.status=txt; /- /SCRIPT CENTER/CENTER CENTERBFONTCOLOR=#0000FF/FONT/B/CENTER PFORM PFONTCOLOR=#000000INPUTtype=button name=lookvalue=显示! onclick=statbar(嗨这是状态列讯息!);INPUT type=buttonname=erasevalue=清除! onclick=statbar();/FONT BR/FORM CENTERFONTCOLOR=#000000/FONT/CENTER /BODY /HTML 在这个

10、例子中我们建了二个按钮，此二个按个均会去呼叫statbar(txt)。函数中的txt表示此函数将经由函数呼叫时传一个变数值进来(我们叫txt但它可代表任意不同的值)你可以见到在产生按钮的form标签中，呼叫到函数statbar(txt)在此我们就不再写成txt。 直接把要显示在状态列上的文字写上去，于是我们可以见到这样的效果，变数txt经由Value中得它的值，然后传入所呼叫的函数中。所以当你按显示的按钮时，statbar(txt)函数被呼叫，然后txt将读入字串嗨这是状态列讯息并且传入函数中，这种经由变数传递值的方式，可以使函数相当具有可变性。 接着来看第二个按钮清除它也呼叫同样的函数，我们

11、并不需要因为传递参数的不同而言两个不同的函数。所以现在我们可以来看看statbar(txt)这个函数做些什么了,其实它相当简单。你只要将txt所要传的文字内容指定给window.status这个变数就可以了。即是window.status=txt，而在清除状态列的时候，只是将空字串写入即可。不过要注意的是必须使用单引号及双引号来区别，这样才容易区分。 以下是我们所制作的跑马灯效果的源程序 html head scriptlanguage=JavaScript !-Hide varscrtxt=这儿的讯息可以改为你要告诉别人的话+ 或是注意事项.; varlentxt=scrtxt.length

12、; varwidth=100; varpos=1-width; functionscroll() pos+; varscroller=; if(pos=lentxt) pos=1-width; if(pos0) for(vari=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(scr

13、oll(),150); /- /script bodyonLoad=scroll();returntrue; Heregoesyourcoolpage! /body /html 此一程式中我们使用了和上面同样的函数（或部分）setTimeout(.)通知，计时器在时间到时去呼叫scroll()函数，使得跑马灯中的文字往前进一格。在函数的一开始，有一些较罗嗦的计算部分，但这并不难使我们了解，这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，结果自然就造成字往前移动的效果了。 第七集如何去产生

14、乱数 接下来我们要为你介绍一个可以产生乱数的函数，也是以JavaScript所写的这个函数只是利用了一点小技巧而已。而这种技巧在大部分的编译器(compiler)中，大都是如此（或类似）计算出乱数来的。相信JavaScript最后应也会以相似的方法来产生这样的method，如果它会提供这样功能的话，以下是此函数的结果： 这是一个计算产生的乱数.3861138662928667 以下是这个作法的写法 head scriptlanguage=LiveScript functionRandomNumber() today=newDate(); num=Math.abs(Math.sin(today.

15、getTime(); returnnum; /script /head body scriptlanguage=LiveScript !- document.write(Thisisarandomnumber:, RandomNumber(); /- /script /body /html 我们的做法是以上一个范例中的时间函数，它会出现一个很大的数，利用这个数再加以运算即可。例如：将它拿来做正弦函数（sin）的运算，得到的数再做绝对值的运算，结果可以得到一个介於0与1间的实数，因为时间的改变是ms为单位，而且你绝不会获得相同的数字不过这个做法并不适合拿来快速的连续产生一系列的乱数，但如果你是不

16、定时久久的用一次，那效果就不错了。JavaScript 小技巧全集（二）第八集如何自动加上最后修改时间 我们在HTML文件档完成了以后，常会加上一行文件最后修改的日期。现在你可不用担心每次都要去改或是忘了改了，你可以很简单的写一个如下的描述语法程式。就可以自动的为你每次产生最后修改的日期了。 html body ThisisasimpleHTML-page. br Lastchanges: scriptlanguage=LiveScript !-hidescriptfromoldbrowsers document.write(document.lastModified) /endhidingc

17、ontents- /script /body /html 以上的document.lastModified参数在Netscape2.0beta2版时是被写成documeut.lastmodified的。然而之后的版本就改为document.lastModified。所以注意一下JavaScript本身是会区分大小写的lastmodified与lastModified在它看来是不同的结果。 第九集JAVASCRIPT基础(1) 一、什么是JAVASCRIPT语言? JavaScript是一种新的描述语言，此一语言可以被箝入HTML的文件之中，透过JavaScript可以做到回应使用者的需求事件(

18、如form的输入)而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。你也可以想像成有一个可执行程式在你的客端上执行一样。目前已有一些写好的程式在Internet上你可以连过去看看。 JavaScript和Java很类似，但到底并不一样。Java是一种比JavaScript更复杂，许多的程式语言。而JavaScript则是相当容易了解的语言。 第十集JAVASCRIPT基础(2) 二、如何执行JaveScript Netscape2.0beta3版以上，就可以执行JavaSc

19、ript的功能了。我们测试过至少beta3版以上可以。目前为止，除了Netscape外，似乎尚没有其他种类的WWW浏览器有此一功能。 以下我们就以一些例子来告诉你如何将JavaScript写在HTML文件中，并且体会一下新语言的特性。我们从第一个例子开始，如何用JavaScript印出一串文字至HTML文件中。 html head MyfirstJavaScript! /head body br ThisisanormalHTMLdocument. br scriptlanguage=LiveScript document.write(这是以JavaScript印出的!) /script br BackinHTMLagain. /body /html