|
|
|
（七）如何使页面上的图像翻转 -----------------------------------------【2001/04/26 《中文导报》】 （八）如何将图像放大和缩小 -------------------------------------------【2001/05/03 《中文导报》】 （九）如何使画面上的文字动起来 ---------------------------------------【2001/05/17 《中文导报》】 （十）如何将滚动的文字内容放在另一个文件里 ---------------------------【2001/05/24 《中文导报》】 ☆ JAVA-SCRIPT 并不神秘 在网页制作入门讲座里陈老师提到过 JAVA-SCRIPT，它是对 HTML 的功能的一种扩充。如果说 HTML 是网页制作基础的话，那么熟练运用 JAVA-SCRIPT ，能使你的网页制作技术更上一层楼，达到 HTML 做不到的动态画面的效果。今天开始我给大家讲 JAVA-SCRIPT，希望通过一些简单而实用的例子，帮助读者走上一个台阶，解开 JAVA-SCRIPT 的神秘性。 先让我们看一个最简单的例子：如何在浏览器的状态条上显示信息。 在网页文件的<HEAD>部份里加入下列代码。 <SCRIPT LANGUAGE="JavaScript"> <!-- msg="看看状态条的信息变了没有。" function setstatus() { window.status=msg; } //--> </SCRIPT> 然后在<BODY>中追加 onload=setstatus()，写成 <BODY onload=setstatus()>，就是说在网页显示的时候调用函数 setstatus()。此时你在浏览器上显示你的测试页面的话，可以看到状态条的信息变成了“看看状态条的信息变了没有。”这句话。 好了，你的一个运用 JAVA-SCRIPT 的网页就做好了，很简单吧。接着我就针对这个具体的例子来说明一些基本概念。 一般来讲，JavaScript 以函数(function)的形式出现，譬如上面的 function setstatus()，其首尾的 <SCRIPT LANGUAGE="JavaScript">和 </SCRIPT> 是一对TAG，表示围在里面的语句是 JavaScript。其中 <!-- 和 //--> 主要是为了在不支持 JavaScript 的浏览器显示时不出现错误信息。setstatus 称之为函数名 (function name)，接着用一对大括号将若干句可执行语句围起来组成一个具有一定功能的函数。像msg这样的字符串称为常数变量，即在整个页面的显示过程中保持不变。window 称之为对象(object，ブジェクト)，而其后的 status 称之为属性(property，プロパティ)。 要注意一个比较重要的事实：嵌入 <HEAD> 部的函数是由 <BODY> 部的<BODY> 的 onload 来“启动”的，用专业的话讲是“激活”或“触发”。所以，onload 也称之为“事件”(event，イベント)。 如果将这个例子稍微改进一下， function setstatus(msg) { window.status=msg; } 在<BODY> 部份里加上一行 <input type=button value="TEST" onclick=setstatus("看看现在是什么")> ，这时候在网页上会出现一个按钮，你点击以后发现状态条的信息就会改变了。在这个改进的例子里的“事件”是 onclick，通过按按钮来“触发”显示状态调信息的函数，而此时的 msg 成为了一个变量了。 ☆ 如何在网页上显示日期和时间 上次通过一个简单的例子介绍了JavaScript 的基本结构和用法。今天介绍一下如何在网页上动态地显示日期和时间。 先在 BODY 里追加下列语句看看结果：（今天开始省略JavaScript中的<!--和//-->，以节省篇幅。） <SCRIPT language="JavaScript"> document.write(Date()); </SCRIPT> 这个例子实际上是在HTML中嵌入一句 JavaScript 语句而已，在显示画面上可以看到现在的日期和时间以“Wed Feb 21 20:16:31 2001”这样的格式显示。Date() 是 JavaScript 的标准函数。调用它后返回系统的日期和时间，document.write 则是具有显示功能的语句。至于日期和时间的显示位置，你可以利用 HTML 的 TABLE 等功能来实现，不再赘述。 如果你想将日期和时间显示成你自己喜欢的形式，那么可以改进上述的例子： <SCRIPT language="JavaScript"> myTime=new Date(); document.write(myTime.getFullYear()+"年"+(myTime.getMonth()+1)+"月"+myTime.getDate()+"日"); </SCRIPT> 这里，先定义了一个日期型变量 myTime 并当前的日期赋给它，然后分别显示myTime 的 getFullYear()，getMonth() 和 getDate()。结果是以“2001年2月21日”的形式显示的。其中 getFullYear() 等称为“对象”myTime 的“方法”(method，メゾッド)，相当于达到某种目的所采用的一种手段。类似的还有getHours(),getMinutes,getSeconds() 等分别可以取得日期的时分秒。 最后给出一个在状态条里动态显示时间的例子： <SCRIPT language="JavaScript"> function settime() { a=new Date(); window.status="现在时刻:"+a.getHours()+"时"+ a.getMinutes()+"分"+a.getSeconds()+"秒"; setTimeout('settime()',500); } </SCRIPT> 在 <BODY> 的描述中追加 onload=settime()，写成 <BODY onload=settime()>。你可以看到在状态条里显示的时间是动态的。注意其中的 setTimeout 语句，是使得这个函数反复循环运行的关键。 ☆ 如何打开一个新窗口 通常在 HTML 中使用TAG<A>，就可以打开一个新窗口来显示页面。譬如： <A herf="test.htm" Target=new> 打开新窗口显示页面 test.htm</A> 这样你用鼠标点击该文字以后会弹出一个新窗口显示页面test.htm，但是这个新窗口的尺寸，位置和属性(譬如是否显示上面的工具条)是不可以设定的。 利用 JavaScript 就可以很方便地根据你的要求设定新开窗口的属性等等。先看看下面的例子： <SCRIPT language="JavaScript"> function popup(htmlname) {newwin=window.open(htmlname,'new','titlebar=no,scrollbars=yes,menubar=no,resizable=yes,width=400,height=200'); } ; </SCRIPT> 在 BODY 部份中加入语句：<A HREF="#" onclick=popup("test.htm")>打开新窗口显示页面test.htm</A>，这时你再用鼠标点击以后弹出的新窗口是固定大小的(400*200)，并且没有菜单条。这个例子里popup是一个函数，通过onclick来执行。在函数popup中，只有一句语句，htmlname是一个变量用来传递你所需要显示的文件名。window.open相当于一个标准函数，这个函数的参数主要有三大部份构成：htmlname是文件名，new是窗口名，后面就是一长串的参数。titlebar指的是浏览器的标题行，scrollbars指的是窗口的滚动条，menubar指的是菜单条，resizable指的是是否允许用鼠标来改变窗口的尺寸，还有directories，status和location，这些参数都可以相应设定为YES或NO，width和heigh则是窗口的大小，单位是像素。读者可以自行改变这些参数的设定看看效果如何。 如果在函数 popup中window.open语句后面加上以下的语句，则可以达到更加进一步的效果： newwin.moveTo(100,50); newwin.focus(); 这里的newwin当然指的是你刚才打开的窗口，moveTo就是可以改变窗口在屏幕上的位置；focus这句语句执行以后就使得新打开的窗口能处于屏幕上最前面的位置(“聚焦”)。 如果你将函数中的长度和宽度做成参数形式的话，你在不同的地方调用它可以打开不同尺寸的窗口。修改后的函数如下： function popup(htmlname, w, h) {newwin=window.open(htmlname,'new','titlebar=no,scrollbars=yes,menubar=no,resizable=yes,width='+w+',height='+h); } ; BODY 中调用的地方可以写成<A HREF="#" onclick=popup("test.htm",300,300)>打开新窗口显示页面1</A>或<A HREF="#" onclick=popup("test.htm",100,400)>打开新窗口显示页面2</A>。这样的话就可以利用同一个函数达到不同的效果。 ☆ 如何控制页面间的转换 上次讲了如何打开一个新窗口，要关闭该窗口最简单的方法当然是点击窗口右上角的“×”。如果要在窗口内添置一个按钮的话也很方便。只要在HTML文本内加上一行语句：<input type=button value="关闭" onclick=window.close()>。 下面通过一个具体例子来说明如何在两个窗口之间的转换等问题。 假设有两个 HTML 文本文件，TEST.HTM 和 TEST1.HTM。在 TEST.HTM 的 HEAD 部份中加入： <SCRIPT language="JavaScript"> var flag=ture function popup(htmlname) { if (flag) newwin=window.open(htmlname,'new','titlebar=no,scrollbars=yes,menubar=no,resizable=yes,width=400,height=200') else newwin.close(); flag=!flag; } ; </SCRIPT> 在BODY中加入：<A href="#" onclick=popup("test1.htm")> 按一下试试看，按两次又怎么样？</A> 在TEST1.HTM的在BODY中则加入： <input type=button value="关闭" onclick=window.close()> <input type=button value="改变调用页面的内容" onclick="opener.location.href='test1.htm';opener.focus();"> 先分析一下 test.htm，函数 popup 是在上一讲的基础上修改而成，主要增加了一个“开关”flag，flag 的初始值是 ture，var 是定义变量。然后在每次调用函数 popup 时改变它的值，这个改变值的语句就是 flag=!flag，这里 flag 是一个逻辑变量，非真即假，也就是1和0。这样的话通过 if 语句的判断，如果是“真”的话就打开小窗口显示 test1.htm，反之就关闭它。所以在页面 test.htm 上按一次会打开小窗口，再按一次就关闭小窗口，如此反复循环。 再看看 test1.htm中的两行语句。第一句就是本文开始时说明过的，关闭窗口而已。第二行则是将“调用” test1.htm 的页面(opener)的内容也改变成为 test1.htm (当然也可以是其他页面)，opener 指的是调用窗口，location.href 是重新定位的意思。focus 上次讲过了，将调用窗口显示在整个屏幕的最上面。 读者可以举一反三灵活运用，就能在各个页面之间自由转换了。 ☆ 如何改变页面背景和文字的颜色 今天介绍一个的例子可以动态地改变页面背景和文字的颜色。先将下面的JavaScript 语句写在 HEAD 部里面。 <script language="JavaScript"> function change_bg(colorname) {document.bgColor=colorname;} function change_fg(colorname) {document.fgColor=colorname;} </script> 在 BODY 里加上下面几句语句，当然还要加一些文字以便看到效果： <input type="radio" name="a" onClick="change_bg('white');"> <input type="radio" name="b" onClick="change_bg('red');"> <input type="radio" name="c" onClick="change_fg('blue');"> <input type="radio" name="d" onClick="change_fg('black');"> 在浏览器里可以看到有四个“按钮”出现，依次点击后会看到什么效果呢？前两个是改变了页面背景的颜色，后两个则改变了文字的颜色。change_bg 和 change_fg 是两个非常简单的函数，都只有一句语句，colorname 是一个参数，传递颜色的名字或数值。“按钮”是 radio 型的，onClick 时就去调用相应的函数，将颜色参数传过去并设定。 颜色参数以前说过，可以直接用名字，譬如 red 和 blue 等等，也可以用一个6位的16进制数值来表示，譬如 8800AA 或 AB6633 等等。 这个例子的意义在于提供了一种交互功能，网页的浏览者可以选择自己喜欢的背景和文字的颜色。同时，将这个例子加以发挥可以做一个比较实用的选择颜色搭配的画面，即在整个画面上编排几百个按钮，这些按钮可以设置不同的背景和文字的颜色，当然可以找到参考书写浏览器认可的颜色名称，也可以直接写代表颜色的数值。然后点击这些按钮，选用自己比较满意的背景和文字的颜色组合。这个HTML应该是很简单实用的，但是很冗长。限于篇幅不能列出，读者作为回家作业自己做做看吧。 需要补充一点的是上述例子的若干个按钮的描述<input type="radio" ......>最好用 TAG <form>包括起来，即：<form name="form1"><input type="radio" name="a"......>......</form>。这样的话，就能使得按钮始终只有一个处于激活的状态，便于识别你究竟按了那个按钮。 ☆ 如何使得页面由暗渐明地显示 上次的例子讲了背景和文字颜色的设定，今天的例子通过对背景颜色设定的变化，使得页面的显示达到一种由暗渐明的效果。 <SCRIPT LANGUAGE="JavaScript"> s="0123456789abcdef"; n=0; function chbg(){ myColor=""; for(c=1;c<=6;c++){ myColor+=s.charAt(n); } document.bgColor=myColor; n++; if(n>15){return} setTimeout("chbg()",100); } </SCRIPT> 在BODY中加入onLoad：<BODY onLoad="chbg()">，使页面显示时调用函数chbg()。 我们来分析一下这个函数。s 是一个字符串常量，n 是一个用于计数的变量。循环语句 for 的作用是根据每次调用时 n 的数值从字符串 s 中截取6个相同的字符组合成颜色变量 myColor，然后将背景设置为 myColor 的颜色。n++ 是将计数变量 n 加1，因为setTimeout 语句的作用，从0到15共16次调用该函数。依次将背景色设定为 00000，111111，222222，……FFFFFF，即达到了由暗渐明的效果。 其中的 charAt(n) 是一个系统提供的函数，即返回字符串第 n 个字符，写成s.charAt(n) 就是取得字符串 s 的第 n 个字符。将这个例子稍微作些改变就能够做到画面由明渐暗的效果，读者自己可以试试看。 ☆ 如何使页面上的图像翻转 今天介绍的一个例子是当鼠标移动到一幅图像上时，该图像会变成另外一幅图片。假设在你的文件夹里有两个图像文件：t1.gif 和 t2.gif，先在 HEAD 部里面加入下列语句： <script language="JavaScript"> sub1 = new Image(); sub1.src = "t1.gif"; sub1_on = new Image(); sub1_on.src = "t2.gif"; function changeOn(imgName) { document[imgName].src =eval(imgName + "_on.src"); } function changeOff(imgName) { document[imgName].src = eval(imgName + ".src"); } </script> 然后在 BODY 中加入 <img src="t1.gif" NAME="sub1" onMouseOver=changeOn('sub1') onMouseOut=changeOff('sub1')> 浏览一下这个画面你看到了什么？将鼠标移动到该图像上时，显示的是图像是 t2.gif，而鼠标移离该位置时，显示的是图像 t1.gif。 你可以看到，在 JavaScript 里，定义了两个图像变量sub1和sub1_on ，这两个变量在页面上载时分别将 t1.gif 和 t2.gif 两个图像载入。 BODY 中的 TAG<img> 中有两个“事件”onMouseOver 和 onMouseOut，也就是当鼠标移入和移去时分别调用函数changeOn() 和 changeOff()。之所以要写成函数形式是为了在同一页面中的不同位置可以分别调用它。那两个函数的实体很简单，只有一句赋值语句，就是在 imgName 的位置显示指定的图像而已。 要注意的事是 TAG<img> 中的 NAME="sub1" ，即将该 TAG<img> 命名为 sub1，然后在函数运行中可以准确的将预先设定的图像显示出来。读者可以在页面上多写几个 TAG<img>，当然也要多准备一些不同的图像文件，然后看看鼠标移来移去时的效果。是不是比静态画面有趣得多？ ☆ 如何将图像放大和缩小 上次讲了在同一位置使得图像变化的例子，今天讲一个使得同一图像放大和缩小的例子。还是和以前一样，在 HEAD 部里面加入下列语句： <script language="JavaScript"> function expand() { if (smallslot.width<=102) { x=window.setTimeout('expand()', 10) smallslot.width=smallslot.width + 5 smallslot.height=smallslot.height + 5 } else { setTimeout('reduce()', 0) } } function reduce() { if (smallslot.width>t80) { x=window.setTimeout('reduce()', 10) smallslot.width=smallslot.width - 5 smallslot.height=smallslot.height - 5 } } </script> 然后在 BODY 中加入 <img id="smallslot" src="t1.gif" onmouseover="expand()" WIDTH="80" HEIGHT="102"> 这里的 WIDTH 和 HEIGHT 是图像的宽度和高度，视具体图像而定。两个函数expand() 和 reduce() 就是对该图像进行放大和缩小。当鼠标移动到图像上方时，调用expand()，该函数的作用就是按一定的时间间隔反复调用自己，不断“放大”（通过修改显示图像的宽度和高度）图像，然后到放大到一定尺寸时调用函数 reduce()，不断“缩小”图像，恢复至原来的大小。 你可以改变 setTimeout 语句中的参数来控制时间间隔（例子中是１０），也可以改变图像放大缩小的修正量（例子中是５），调节每次变化的长度单位。 当然，这个例子是利用浏览器的功能简单地放大和缩小图像的，因此放大以后的图像难免有所失真。读者要选择适当的图片和尺寸尽可能使它达到最佳的效果。 ☆ 如何使画面上的文字动起来 讲了两个图像的例子，但是页面上图像过多的话影响下载的速度。今天讲一个有关文字的例子，如果文字处理恰当的话，页面也会给人一种动态的感觉。这个例子的效果是以打字机打字的感觉来逐字显示一个字符串。例子在 HEAD 部里面加入下列语句： <script language="JavaScript"> txt = "这是应《中文导报》之约而写的关于网页的文章。欢迎批评指正。"; function doCycle(c) { cur = "<FONT COLOR='red'> »</FONT>" output = "<font color=blue>" +txt.substring(0,c)+ "</font>" + cur; typetext.innerHTML = output ; } function typewriter(n) { doCycle(n); if (n > txt.length) {typetext.innerHTML = "<font color=blue>"+ txt + "</font>" ; return} setTimeout("typewriter(" + (n+1) + ")", 100); } </script> 然后在 BODY 中加入：<div ID="typetext"> </div>。TAG<div>的意思是“定义”一块名字为“typetext”的区域，<div>的其他参数（位置，属性等）可以省略不写。当然在<BODY>要写成 <BODY onload=typewriter(1);>来“启动”前面定义的函数typewriter。 typewriter 函数的主要功能是反复调用函数 doCycle 直到整个字符串全部显示完毕，setTimeout 的功能以前讲过，就是定时一次次地重复执行。注意到这个定时语句调用的对象是函数自己，这叫做函数的嵌套。传递的参数是 n+1，等于每次累加１。 函数 doCycle 的功能是根据参数 c（字符串当前位置）来截取一段字符串并显示。其中的 typetext.innerHTML 就是在命名为“typetext”的区域里显示该子字符串。常量 cur显示两个小箭头，随着字符串的显示而移动，看上去有一种动态的视觉效果。如果把这个例子扩充一下，譬如利用TAG<div>的属性设定等等，可以达到更好的结果。 ☆ 如何将函数体放在另一个文件里 这个例子主要说明可以将 javascript 的语句（也可称为“函数体”）放在另外一个文件里，这样的话，如果整个页面已经定型的话，就不要再去改动了。要经常维护修改的只是 javascript 语句所在的文件，它相当于一个参数文件。同时，这个例子本身也很实用，可以做成一个滚动的菜单。 在 HTML 文件里加入下面的语句： <MARQUEE direction=up height=200 onmouseout=this.scrollAmount=1 onmouseover=this.scrollAmount=0 scrollAmount=1 scrollDelay=20 scrolltop="0" scrollleft="0"> <SCRIPT language=javascript src="sub.html"></SCRIPT> </MARQUEE> 实际上就是在TAG <MARQUEE>里面加了一些 javascript 语句，但是这些 javascript 语句是写在另外一个名字为 sub.html 的文件里的。 sub.html 的内容可以是这样的格式： document.write("<font color=RED>这里可以随便写点什么</font><br>"); document.write("<font color=RED>分成若干行的文字，随便几行</font><br>"); ………… 这样的话，在浏览器里看前面那个主页面的话，就可以看到几行滚动的文字。而改变文字的内容你只要修改 sub.html 就可以了。 如果将 sub.html 的内容写成下面的形式，就成为一个菜单了： document.write("<font color=Blue><a href='http://www.yahoo.com target=_blank>YAHOO网页</font><br>"); document.write("<font color=Blue><a href='http://www.chubun.com target=_blank>中文导报</font><br>"); document.write("<font color=Blue><a href='http://come.to/johnchen888 target=_blank>陈老师网页</font><br>"); ………… 看看这个效果是不是很酷？将鼠标移动到文字上就会停止滚动，点击文字就会转到相应的网页去了。当然这应该说是 HTML 的功能，但是其巧妙之处在于利用javascript 的 document.write 语句将页面和经常要改动的文字分开来存储而便于维护更新。 |