星星博客 - Powered by Discuz! Board

标题: JavaScript 小技巧 [打印本页]

作者: cnangel 时间: 2003-7-15 05:48 标题: JavaScript 小技巧

第一集　如何用滑鼠控制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="LiveScript">
　〈!-- Hiding
　function hello() {
　alert("哈罗!");
　}
　〈/script>
　〈/head>
　〈body>
　〈a href="" onMouseOver="hello()">link〈/a>
　〈/body>
　〈/html>
第二集　如何在页面内加入日期
　　我们要告诉你一个使用日期和时间的例子，是从你个人客户端机器获取日期和时间。
做法如下：
〈script language="LiveScript">
〈!-- Hiding
　today = new Date()
　document.write("现在时间是　 ",today.getHours(),":",
　today.getMinutes())
　document.write("〈br>今天日期为　 ", today.getMonth()+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 0　0h 开始以 ms(milli seconds) 来计算目前的时间的，这听起来似乎有些复杂。但你倒不用担心，它有标准的共用函数可以计算，你只要知道如何用就可以了。
第三集　如何在网页上使用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)

第四集　如何使用运算函数
　　这是一个特殊的内建函数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>

作者: cnangel 时间: 2003-7-15 05:49 标题: JavaScript 小技巧

第五集　如何使用浏览器的状态栏
以下是原始语法
〈HTML>
〈HEAD>
　　〈TITLE>浏览器的状态栏〈/TITLE>
〈/HEAD>
〈BODY BGCOLOR="#FFFFFF">
〈SCRIPT language="JavaScript">
〈!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
〈/SCRIPT>
〈CENTER>〈/CENTER>
〈CENTER>〈B>〈FONT COLOR="#0000FF">〈/FONT>〈/B>〈/CENTER>
〈P>〈FORM>
〈P>〈FONT COLOR="#000000">　　〈INPUT type="button"
　　　 name="look" value="显示!"
　　　 onclick="statbar(´嗨　　这是状态列讯息!´);">　〈INPUT
　　　 type="button" name="erase" value="清除!"
　　　 onclick="statbar(´´);">〈/FONT>
〈BR>〈/FORM>
〈CENTER>〈FONT COLOR="#000000">　〈/FONT>〈/CENTER>
〈/BODY>
〈/HTML>
　　在这个例子中我们建了二个按钮，此二个按个均会去呼叫 statbar(txt) 。函数中的 txt 表示此函数将经由函数呼叫时传一个变数值进来 (我们叫 txt但它可代表任意不同的值)你可以见到在产生按钮的〈form> 标签中，呼叫到函数statbar(txt)在此我们就不再写成 txt 。
　　直接把要显示在状态列上的文字写上去，于是我们可以见到这样的效果，变数 txt 经由 ´Value´ 中得它的值，然后传入所呼叫的函数中。所以当你按＂显示＂的按钮时，statbar(txt) 函数被呼叫，然后 txt 将读入字串＂嗨　　这是状态列讯息＂　并且传入函数中，这种经由变数传递值的方式，可以使函数相当具有可变性。
　　接着来看第二个按钮＂清除＂　它也呼叫同样的函数，我们并不需要因为传递参数的不同而言两个不同的函数。所以现在我们可以来看看statbar(txt) 这个函数做些什么了,其实它相当简单。你只要将 txt 所要传的文字内容指定给 window.status 这个变数就可以了。即是 window.status =txt，而在清除状态列的时候，只是将空字串写入即可。不过要注意的是必须使用单引号及双引号来区别，这样才容易区分。
第六集　如何制作跑马灯效果　
以下是我们所制作的跑马灯效果的源程序
　〈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()函数，使得跑马灯中的文字往前进一格。在函数的一开始，有一些较罗嗦的计算部分，但这并不难使我们了解，这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，结果自然就造成字往前移动的效果了。
第七集　如何去产生乱数
　接下来我们要为你介绍一个可以产生乱数的函数，也是以 JavaScript 所写的这个函数只是利用了一点小技巧而已。而这种技巧在大部分的编译器(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 为单位，而且你绝不会获得相同的数字不过这个做法并不适合拿来快速的连续产生一系列的乱数，但如果你是不定时久久的用一次，那效果就不错了。
第八集　如何自动加上最后修改时间
　　我们在 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>
　　以上的 document.lastModified 参数在 Netscape 2.0beta 2 版时是被写成documeut.lastmodified 的。然而之后的版本就改为 document.lastModified。所以注意一下JavaScript 本身是会区分大小写的　 lastmodified 与lastModified在它看来是不同的结果。
第九集　　JAVASCRIPT基础(1)
一、什么是JAVASCRIPT语言?
　　JavaScript是一种新的描述语言，此一语言可以被箝入HTML的文件之中，透过JavaScript可以做到回应使用者的需求事件(如form的输入)而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。你也可以想像成有一个可执行程式在你的客端上执行一样。目前已有一些写好的程式在Internet上你可以连过去看看。
　　JavaScript和Java很类似，但到底并不一样。Java是一种比JavaScript更复杂，许多的程式语言。而JavaScript则是相当容易了解的语言。
第十集　　JAVASCRIPT基础(2)
二、如何执行JaveScript
　　Netscape2.0beta3版以上，就可以执行JavaScript的功能了。我们测试过至少beta3版以上可以。目前为止，除了Netscape外，似乎尚没有其他种类的WWW浏览器有此一功能。
　　以下我们就以一些例子来告诉你如何将JavaScript写在HTML文件中，并且体会一下新语言的特性。我们从第一个例子开始，如何用JavaScript印出一串文字至HTML文件中。
〈html>
〈head>
MyfirstJavaScript!
〈/head>
〈body>
〈br>
This isanormal HTML document.
〈br>
〈scriptlanguage="LiveScript">
document.write("这是以JavaScript印出的!")
〈/script>
〈br>
BackinHTMLagain.
〈/body>
〈/html>

欢迎光临星星博客 (http://commerce.huhoo.net/)