作者：张鑫,薛莉颖,高茹
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
JavaScript网页特效范例宝典(光盘内容另行下载，地址见书封底)试读：
前言
随着网络的迅速发展，Web应用已不再是高不可攀的技术，但要制作出页面友好、美观、具有良好交互性的网站并非是一件容易的事。它不仅需要网站开发者熟练掌握服务器端开发技术，而且需要掌握客户端脚本语言。
JavaScript是比较流行的一种制作网页特效的脚本语言，它由客户端浏览器解释执行，可以应用在ASP、JSP、PHP和ASP.NET网站中。目前非常热门的jQuery就是以JavaScript为基础的。由此可见，熟练掌握并应用JavaScript对于网站开发人员来说是非常重要的。
总之，网站开发是一门创造性较强的活动，因其涉及面广，开发者往往需要学习、研究各方面的技术和问题。技术水平的提高与开发时间成正比，因此需要长时间经验的积累和磨炼。编程也是一项需要相互学习、相互交流的工作，在交流过程中，不但可以分享他人的编程经验、体会，更会产生创新的灵感，达到事半功倍的效果。
本书内容
本书精选了420个典型实例及应用特效实例，所选实例主要覆盖开发中的热点问题和关键问题。全书按实际应用进行分类，可以使读者在短时间内掌握更多的有用的技术，快速提高编程水平。书中所选内容均来源于实际项目的开发，有的实例是作者开发实践的积累，有的实例来源于公司的开发项目，还有的来自读者的提问。这些实例所涉及的问题都是非常实用的。
通过对这些实例进行详细分析和讲解，可以让读者迅速掌握网站设计中的开发经验技巧，迅速提高网站设计的综合水平。全书共 20 章，涵盖了窗口/框架与导航条设计、表单及表单元素、实用 JavaScript 函数、日期和时间、文字特效、超级链接特效、操作表格、图形图像与多媒体、页面特效、状态栏特效、报表与打印、网站安全、HTML/CSS样式、JavaScript与XML、JavaScript与ASP结合、JavaScript与JSP结合、JavaScript与ASP.NET结合、JavaScript与PHP结合、综合应用、jQuery应用开发等各方面的内容。
在实例讲解上，全书采用了统一的编排方式，每个实例都包括“实例说明”、“技术要点”、“实现过程”和“举一反三”4个部分。在“实例说明”中，以图文结合的方式给出了实例的功能说明及运行效果。在“技术要点”中给出了实例的重点、难点技术和相关编程技巧。在“实现过程”中介绍了该实例的设计过程和主要程序代码。在“举一反三”中给出了相关实例的扩展应用。
本书特色
● 所有实例内容都以解决开发者在编程中遇到的实际问题和开发中应该掌握的技术为中心，每个实例都可以独立解决某一方面的问题。有的可以解决工作中的难题，有的可以提高工作效率，有的可以提升工作价值。
● 所选实例具有极强的扩展性，能够给读者以启发，使读者举一反三、实现非常实用的效果。
● 所选实例具有广泛的代表性，所有实例都提供了源代码，读者可以快速使用。
● 为便于查找实例中的编程技术和技巧，本书附录提供了程序快速索引功能，该索引按字母顺序列出了本书中使用相关技术和技巧的实例号。
● 本书光盘中提供了本书实例的“源码速查电子搜索引擎”，读者可以快速检索所需技术和代码。
本书的约定
● 书中每个实例的标题栏都给出了程序的特色和所在光盘中的路径，读者可根据需要学习和使用。
● 书中涉及的数据库实例，在对应文件夹中均提供了用于保存数据库文件的文件夹。
● 书中有可能多个实例用到了同一主要技术，为节省篇幅，相关技术的讲解只在一个实例中进行介绍，读者可通过书后的技术索引了解相关技术。
● 因篇幅限制，本书实例只给出了关键代码，其他代码参见光盘中实例的源程序。
● 使用本书实例光盘前，请仔细阅读光盘中的“光盘使用说明”。
本书的服务
本书由明日科技组织编写，参加编写的有王小科、王国辉、崔佳音、张鑫、周佳星、辛洪郁、赛奎春、高春艳、杨丽、陈英、刘佳、刘丽艳、刘红艳、孙雨婷等。由于作者水平有限，疏漏之处在所难免，请广大读者批评指正。
如果读者在使用本书时遇到问题，可以访问明日科技网站，我们将通过明日科技网站全面为读者提供网上服务和支持。对于读者使用本书时遇到的错误和问题，我们承诺将在5个工作日内回复。
服务网站：www.mingribook.com
服务信箱：mingrisoft@mingrisoft.com
服务电话：4006751066作者2014年7月
第1章 窗口/框架与导航条设计
窗口控制
弹出网页对话框
窗口的动画及其他效果
框架的应用
无边框窗口
水平导航条应用
下拉菜单式导航条
1.1 弹出窗口控制
本节所说的弹出窗口是指通过 window.open( )方法打开的新窗口。这种弹出窗口在网站中经常会用到，如众所周知的弹出式网站公告或广告等，还有打开新窗口显示公告的详细内容等。下面将通过具体实例介绍如何控制弹出窗口。
实例001 打开新窗口显示广告信息
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\01\001
实例说明
广告是网站最大的盈利手段，任何网站都不可能将其省略，那么，如何才能既可以从广告中获利，又能使用户流畅地阅读网站信息呢？本实例将介绍如何制作一个单独的广告窗体，在用户登录网站的时候自动弹出，然后再由用户将其关闭。运行本实例，将弹出一个新窗口显示广告信息，运行结果如图1.1所示。图1.1 打开新窗口显示广告信息
技术要点
本实例主要应用 JavaScript 的 window对象，该对象应用极为普遍，但主要应用在 HTML中打开窗口。用户浏览器决定窗口的样子，设计者左右不了其窗口的大小及样式，但JavaScript给了程序这种控制权。在JavaScript中，可以使用window对象实现对窗口的控制，该对象的常用方法如表1.1所示。
下面将对本实例中应用的open()方法进行详细介绍。表1.1 window对象的常用方法
应用 JavaScript 的 open()方法可以打开浏览器窗口。程序开发人员可以基于特定的条件创建带有被装入其中的特定文档的新窗口，也可以指定新窗口的大小以及窗口中可用的选项，并且可以为引用它的窗口指派名字。
使用window对象打开窗口的语法格式如下。
WindowVar=window.open(url,windowname[,location]);
参数说明如下。
● WindowVar：当前打开窗口的句柄。如果 open()方法成功，则 WindowVar 的值为一个window对象的句柄，否则WindowVar的值是一个空值。
● url：目标窗口的URL。如果URL 是一个空字符串，则浏览器将打开一个空白窗口，允许用write()方法创建动态HTML。
● windowname：window对象的名称。
● location：对窗口属性进行设臵，其可选参数如表1.2 所示。表1.2 对窗口属性进行设置的可选参数
实现过程（1）首先创建用于弹出广告信息的页面，在该页面中添加所要宣传的广告信息。（2）在网站首页写上如下代码，每次进入网站首页时将弹出广告窗口，代码如下。
举一反三
根据本实例，读者可以：
开发大型门户网站中弹出广告窗口；
开发商务网站中弹出公告或广告窗口；
开发信息资讯网站中弹出公告或广告窗口。
实例002 定时打开窗口
本实例是一个简化操作的程序
实例位置：光盘\mingrisoft\01\002
实例说明
在开发网站时，常常需要打开窗口，而打开窗口有很多种方式，本实例主要讲解如何定时打开窗口。运行本实例，双击 index.htm 浏览该页面，5s 后将打开一个指定大小的窗口，通过该窗口可以显示相关数据信息或是一个网站内的宣传广告等。程序运行结果如图1.2所示。图1.2 定时打开窗口
技术要点
本实例主要应用 window 对象 setTimeout()方法实现定时打开窗口，下面将对 setTimeout()方法进行详细介绍。
setTimeout()方法的语法格式如下。
setTimeout（function,milliseconds）
参数说明如下。
● function：要调用的JavaScript 自定义函数名称。
● milliseconds：设臵超时时间（以ms 为单位）。
功能：超过超时时间后，调用函数。此值可以用clearTimeout()函数清除。
注意：setTimeout()方法在超时时间后只调用一次函数，而 setInterval()方法是按一定时间重复调用指定的函数。
说明：1000ms等于1s。
实现过程（1）制作用于打开窗口时显示的数据信息页面，在该页面中加入相关所要显示的数据信息。（2）应用function函数创建自定义pp()函数，同时应用setTimeout()方法实现定时打开窗口，代码如下。
举一反三
根据本实例，读者可以：
开发新闻系统中的即时新闻、热点新闻等；
开发电子商务系统中的商品展示；
开发在线论坛中的主题信息浏览。
实例003 通过按钮创建窗口
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\01\003
实例说明
在设计网页时，经常会在主页面中调用或创建其他页面，并对调用的页面指定其大小、位臵和显示样式。实例在运行“index.htm”文件后，将打开“通过按钮创建窗口”页面，在该页面中单击“创建新窗口”按钮，将按指定的大小及位臵打开“明日美食留言簿”页面。运行结果如图1.3所示。图1.3 通过按钮创建窗口
技术要点
本实例主要是用window对象的open()方法来创建和调用其他窗口。
window对象open()方法的介绍可参见实例001。
实现过程（1）在页面中添加一个按钮，并在onClick（单击）事件中调用自定义函数pp()，代码如下。
（2）编写用于实现创建新窗口的JavaScript代码。举一反三
根据本实例，读者可以：
在页面中动态打开其他网页；
打开一个没有状态栏的网页。
实例004 自动关闭的广告窗口
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\01\004
实例说明
进入网站后，很多网站都会弹出新窗口（如广告等），多数窗口需要浏览者自行关闭，为了方便浏览者对页面中信息的浏览，笔者在这里运用了一种新的方法来解决弹出窗口自动关闭问题。
当用户浏览网站时，无需关闭弹出的新窗口，在页面运行超过一定的时间之后，该窗口便自动关闭，这大大地方便了浏览者。运行本实例，将弹出一个新窗口显示广告信息，如图 1.4所示。页面运行5s后，弹出的广告窗口将自动关闭。图1.4 自动关闭的广告窗口
技术要点
本实例主要应用 window 对象的 setTimeout( )方法和 close( )方法实现。window 对象的setTimeout()方法用于延迟执行某一操作。setTimeout( )方法的相关语法格式请读者参见实例002。
实现过程（1）在打开广告窗口的页面中添加如下代码实现打开新窗口的功能。
（2）在弹出的广告窗口中通过设臵window对象的setTimeout( )方法，实现窗口自动关闭，代码如下。
举一反三
根据本实例，读者可以：
在编写商务网站时应用此技术；
在开发信息资源网站应用此技术；
在编写教育信息网站应用此技术。
实例005 控制弹出窗口居中显示
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\005
实例说明
使用过 JavaScript 的 window.open( )方法打开新窗口的读者都知道，在使用 window.open( )方法打开新窗口时，新弹出的窗口默认是在屏幕左上端显示的，这样如果弹出的窗口比较小，一般不会引起浏览者的注意，如果让弹出的窗口居中显示就会很直观了。本实例将介绍如何控制弹出窗口的居中显示。运行本实例，单击页面下方的“TOP”超级链接，即可弹出居中显示的管理员登录窗口，如图1.5所示。图1.5 控制弹出窗口居中显示
技术要点
本实例首先应用JavaScript中的window对象的open()方法，打开指定大小的新窗口，然后通过screen对象，获取屏幕的分辨率，再根据获取的值通过window对象的moveTo()方法，将新窗口移动到屏幕居中位臵。由于 window对象的open()方法在实例 001中已经介绍，下面只介绍window对象的moveTo()方法和screen对象。
moveTo()方法将窗口移动到指定坐标（x, y）处，其语法格式如下。
window.moveTo(x,y)
其中，参数x，y表示窗口移动到的位臵处的坐标值。
注意：moveTo()方法是Navigator和IE都支持的方法，它不属于W3C标准的DOM。
screen对象是JavaScript中的屏幕对象，反映了当前用户的屏幕设臵。该对象的常用属性如表1.3所示。表1.3 screen对象的常用属性
实现过程（1）在页面的适当位臵添加控制窗口弹出的超级链接，本例中采用的是图片热点超级链接，关键代码如下。
（2）编写自定义的JavaScript函数manage()，用于弹出新窗口并控制其居中显示，代码如下。>（3）最后设计弹出窗口页面Login_M.htm，代码如下。
举一反三
根据本实例，读者可以：
将弹出的用户登录窗口居中显示；
弹出居中显示的广告窗口；
将弹出的显示详细信息页居中显示。
实例006 弹出的窗口之Cookie控制
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\01\006
实例说明
在很多网站中都应用了弹出窗口显示广告信息，每次访问网站都会弹出相同的广告窗口，久而久之就会让人产生厌倦感。为了解决该问题，本实例将介绍一种只有第一次访问网站时才弹出广告窗口的方法。运行本实例，将弹出如图 1.6 所示的广告窗口，关闭浏览器后再次运行本实例，广告窗口将不再自动弹出。
技术要点
Cookie 是网站在访问者硬盘上存储的一些定制的信息段。通过浏览器，网页可以实现对Cookie的存储、获取和删除。Cookie的目的只有一个，即记录访问者的个体信息。在开始使用Cookie前，读者需要知道下面的规则。
浏览器可以存储的总Cookie数量不能超过300个，每个服务器不得超过20个（对于整个服务器，而不仅仅是用户自己的网页或网站）。存储容量也限制在每个 Cookie 4KB，所以不要试图在一个Cookie中存储过多的信息。默认情况下，一个Cookie可以在整个浏览器的运行期间存在；当用户退出浏览器后，Cookie 内容也就会消失。为了让一个 Cookie 的持续时间超过一个浏览周期，可以设臵失效日期。图1.6 弹出的窗口之Cookie控制
注意：document.cookie 对象并不会直接连接到用户的硬盘上，它只是映射所有存储在那里的Cookie。
实现过程（1）建立一个预打开的placard.htm文件，通常该文件中放臵广告或公告信息，本例中放臵的是公告信息。（2）在需要弹出公告窗口的页面中，判断客户端浏览器中是否存在指定的Cookie，如果不存在，则弹出新窗口显示公告信息，否则不弹出公告窗口，代码如下。
（3）在需要弹出广告窗口页面的 onLoad 事件中调用弹出广告窗口的函数，程序代码如下。
技巧：当浏览者将弹出的窗口关闭之后，再次进入该网站时，此窗口将不会再出现。如果想让该窗口再次出现，可以选择“工具”→“Internet 选项”，在弹出的对话框中“常规”选项卡中选中“删除Cookies”复选框，单击“确定”按钮即可。
举一反三
根据本实例，读者可以：
开发游戏网站中的系统公告；
开发新闻资讯类网站中的最新公告；
开发大型门户类网站中的弹出广告。
实例007 为弹出的窗口加入关闭按钮
本实例是一个简化操作的程序
实例位置：光盘\mingrisoft\01\007
实例说明
使用Windows操作系统的用户都知道，单击IE窗口中的“关闭”按钮时，可以关闭窗口，但是这样有时并不是很直观。为了方便用户，可以在弹出的窗口中加入“关闭”按钮。运行本实例，单击“最新服务”超级链接，将弹出最新服务详细信息页面，如图 1.7 所示。在该图的右下角有一个“关闭”按钮，单击该按钮可以将当前窗口关闭。图1.7 为弹出的窗口加入关闭按钮
技术要点
本实例主要应用window对象的close()方法实现。close()方法的语法如下。
window.close();
功能：window对象的close()方法用于自动关闭浏览器窗口。
注意：应用window对象的close()方法关闭弹出的窗口时，和单击IE标题栏中的“关闭”按钮是一样的，但是如果关闭IE的主窗口，系统就会弹出“是否关闭此窗口”的确认对话框，只有单击“是”按钮后才可以关闭IE主窗口。
实现过程（1）创建提供“最新服务”超级链接的文件，注意该超级链接需要执行的操作应该是应用window.open( )方法打开新窗口，代码如下。
最新服务（2）在最新服务窗口中加入关闭按钮，关键代码如下。
举一反三
根据本实例，读者可以：
实现制作办公自动化系统中的添加员工信息页面；
实现打开新窗口显示新闻详细信息页面；
在弹出的网站公告窗口中加入关闭按钮。
实例008 关闭弹出窗口时刷新父窗口
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\01\008
实例说明
关闭弹出窗口时刷新父窗口也可以说是关闭子窗口时自动刷新父窗口中的信息，即用户通过window对象的open()方法打开一个新窗口（子窗口），当用户在该窗口中进行关闭操作后，关闭子窗口的同时系统会自动刷新父窗口来实现实时更新页面。例如，运行本实例，在会议记录中，单击页面中的“会议记录”超级链接，将弹出会议记录页面，该页面通过单击“关闭”按钮将自动关闭，同时系统会自动刷新父窗口，如图1.8所示。图1.8 关闭弹出窗口时刷新父窗口
技术要点
本实例主要应用window.open()语句打开新窗口，并在新窗口中应用opener属性，该属性返回一个引用，用于指定打开本窗口的窗口对象。
语法：
window.opener
window.opener.方法
window.opener.属性
功能：返回的是一个窗口对象。opener属性与打开该窗口的父窗口相联系，当访问子窗口中opener属性时，返回的是父窗口，通过该属性，可以使用父窗口对象中的方法和属性。
注意：如果窗口不是由其他窗口打开的，在Netscape中这个属性返回null，在IE中返回“未定义”（undefined）。undefined在一定程度上等于null。需要说明的是：undefined不是JavaScript常数，如果读者企图使用undefined，那就真的返回“未定义”了。
reload()方法相当单击浏览器上的“刷新”（IE浏览器）按钮或“Reload”（Netscape浏览器）按钮。
实现过程（1）制作用于显示会议信息列表的会议管理页面，在该页面中加入空的超级链接，并在其单击事件中加入JavaScript脚本，实现打开一个指定大小的新窗口，代码如下。
onClick="Javascript:window.open('new.htm','','width=400,height=220')"> 会议记录
举一反三
根据本实例，读者可以开发：
办公自动化系统中，打开新的页面添加员工信息后，关闭该页面时需要刷新父窗口；
在电子商务网站中后台管理添加商品信息、修改商品信息和删除商品信息时，都需要刷新父窗口。
实例009 关闭IE主窗口时，不弹出询问对话框
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\009
实例说明
通常情况下，当使用JavaScript的window.close()语句关闭IE主窗口时，都会弹出一个“你查看的网页正在试图关闭窗口。是否关闭此窗口？”的询问对话框。在制作网络应用程序时，这种情况是我们不想看到的，那么如何才能屏蔽该对话框呢？本实例将介绍解决该问题的方法。运行本实例，如图 1.9所示，单击“关闭系统”超级链接后，该 IE窗口将被直接关闭。图1.9 关闭IE主窗口时，不弹出询问对话框
技术要点
本实例主要应用 JavaScript的 window对象的 opener属性将要关闭的 IE窗口的打开窗口设臵为 null，然后再通过 window 对象的 close( )方法将该窗口关闭，这样就不会弹出询问对话框了。
实现过程
在实例首页中，添加一个用于关闭窗口的超级链接，在该超级链接的 onClick 事件中添加控制窗口关闭的代码，具体代码如下。
举一反三
根据本实例，读者可以：
开发进销存管理系统中的退出系统；
开发办公自动化管理系统中的关闭系统；
开发宽带影院中的打开全屏显示的主窗口。
1.2 弹出网页对话框
这里所说的网页对话框是指通过指定的脚本代码打开一个新的窗口，并且该窗口可以有返回值，网页对话框可以分为网页模式对话框和网页非模式对话。下面将通过具体实例介绍网页对话框的应用。
实例010 弹出网页模式对话框
本实例是一个提高网站安全性的程序
实例位置：光盘\mingrisoft\01\010
实例说明
在开发程序网站时，有时需要弹出网页模式对话框。例如本实例将弹出一个指定大小的网页模式对话框。运行结果如图1.10所示。图1.10 弹出网页模式对话框
技术要点
本实例主要应用window对象的showModalDialog( )方法，该方法用于弹出网页（模式）对话框，其语法格式如下。
variant = object.showModalDialog(sURL [, vArguments [, sFeatures]])
参数说明如下。
● sURL：指定URL 文件地址。
● vArguments：用于向网页对话框传递参数，传递参数的类型不限制，对于字符串类型，最大为4096个字符，但也可以传递对象，例如index.htm。
● sFeatures：可选项，窗口对话框的设臵参数，主要参数如表1.4 所示。表1.4 参数说明
实现过程（1）制作外出登记的页面，在该页面中添加相应的表单或表单元素，在“登记”图片按钮的onClick事件中调用自定义JavaScript函数opendialog()，代码如下。
（2）编写自定义JavaScript函数opendialog()，用于打开网页对话框，代码如下。
（3）制作用于添加外出登记的页面 new.htm，通过该页面完成外出登记信息的添加。完整代码如下。
举一反三
根据本实例，读者可以：
在编写人力资源管理系统时，为员工指定所属部门；
在编写校园管理系统时，弹出网页对话框选择班级或专业；
在客房预订系统中，弹出网页对话框选择客户信息。
实例011 弹出全屏显示的网页模式对话框
本实例是一个提高网站安全性的程序
实例位置：光盘\mingrisoft\01\011
实例说明
在设计网页时，对于一些只有指定用户才可以看到的信息，可以将其以全屏显示的网页（模式）对话框展示给用户，这样可以保证用户看后能及时将其关闭。例如，在明日科技编程词典网站中的“购买须知”就是只有登录用户才可以查看。用户登录后，“购买须知”超级链接方可使用，单击“购买须知”超级链接，即可进入如图1.11所示的“购买须知”页面，这时的“购买须知”页面是以全屏网页（模式）对话框形式进行显示的，用户只有关闭该页面后，才可以查看网站的其他内容。图1.11 弹出全屏显示的网页模式对话框
技术要点
本实例主要应用screen对象的width、height属性和window对象的showModalDialog()方法实现，在实例010中已经介绍了window对象showModalDialog()方法，这里不再赘述。其实还有一种方法也可以打开网页对话框，即showModelessDialog()方法。
使用showModalDialog()与showModelessDialog()方法的区别在于，showModalDialog()打开的网页对话框为模式窗口，臵在父窗口上，必须关闭才能访问父窗口；而showModelessDialog()方法打开的对话框是无模式窗口，打开后不必关闭也可以访问父窗口或其他窗口。
实现过程（1）创建提供“购买须知”超级链接的页面，在该页面中添加空的超级链接，在该超级链接的onClick事件中调用自定义JavaScript函数opendialog()。关键代码如下。
购买须知（2）编写自定义JavaScript函数opendialog()，用于打开全屏显示的网页对话框，程序代码如下。
（3）创建用于全屏显示的页面，在该页面中添加所要显示的信息。程序代码如下。
举一反三
根据本实例，读者可以：
实现弹出的网站后台管理员登录窗口；
实现当用户执行非法操作后，弹出一个大大的警告框。
实例012 网页拾色器
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\01\012
实例说明
在动态网站中，经常会用到要求用户可以在客户端应用自定义颜色来显示某些信息的情况，如留言文字的颜色。这可以在网页中加入一个网页拾色器实现。运行本实例，单击页面中的颜色块，将打开网页拾色器，如图1.12所示。当鼠标光标移动到指定色块时，将显示该色块的颜色值；当用户单击指定色块时，就会关闭该网页对话框，并将选择的颜色设臵为颜色块的背景色。图1.12 网页拾色器
技术要点
在本实例中仅使用216种浏览器安全的颜色，即所谓Netscape色块。这216种颜色分别代表0、51、102、153和204这5个颜色值以及每一种原色（即红、绿、蓝）。这些十进制数值对应的十六进制数分别为：0x00、0x33、0x66、0x99、0xCC和0xFF。在HTML的颜色属性中，黑色是#000000，纯红色是#FF0000，纯绿色就是#00FF00，纯蓝色是#0000FF，而白色是#FFFFFF。在实现网页拾色器时，需要应用JavaScript的数组。创建数组可以有以下3种方法。（1）无参数调用。语法格式如下。
var h = new Array();（2）指定数组前n个元素的值。语法格式如下。
var h = new Array(arglist);
其中，参数arglist是一个用逗号隔开的值表，这些值用于给Variant所包含的数组的各元素赋值。如果不提供参数，则创建一个长度为0的数组。（3）指定具有的元素个数。语法格式如下。
var h = new Array(n);
其中，参数n是指定数组的长度。在JavaScript中，数组的第一个元素的下标值为0，所以n的值为数组的最大下标值加1。
注意：没有作为数组声明的Variant也可以表示数组。除了长度固定的字符串以及用户定义类型之外，Variant 变量可以表示任何类型的数组。尽管一个包含数组 Variant 和一个元素为Variant类型的数组在概念上有所不同，但对数组元素的访问方式是相同的。
实现过程（1）创建需要调用网页拾色器的页面，在该页面中添加一个文本框，将文本框设臵为只读，同时将文本框的背景颜色设臵为黑色，并在该文本框的onClick事件中调用自定义的JavaScript函数colorpick()，代码如下。
（2）编写自定义的JavaScript函数colorpick()，用于打开网页对话框调用网页拾色器，并用网页拾色器的返回值设臵文本框的背景颜色，代码如下。
（3）制作网页拾色器页面color.htm。关键代码如下。
举一反三
根据本实例，读者可以：
实现具有UBB功能的在线论坛；
实现网站聊天室；
实现网页换肤。
实例013 日期选择器
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\01\013
实例说明
在动态网站的人机交互页面中，经常会用到要求用户输入日期的情况，如果让用户手动输入，不但操作不方便，而且日期格式不好控制。为了解决此问题，可以在页面中加入日期选择器。运行本实例，单击“日期时间图片”超级链接，将弹出具有日期选择功能的网页对话框，如图1.13所示。当用户单击需要的日期后，日期选择网页对话框将自动关闭，并将选择结果填入“请假时间”文本框中。图1.13 日期选择器
技术要点
本实例主要应用window 对象的showModalDialog( )方法实现，关于showModalDialog( )方法的详细介绍请读者参见实例010。
实现过程（1）创建需要调用日期选择器的页面，在该页面中添加一个标识日期时间的图片，在该图片的onClick事件中调用自定义的JavaScript函数loadCalendar()，代码如下。
（2）编写自定义的JavaScript函数loadCalendar()，用于打开网页对话框调用日期选择器，代码如下。
（3）制作日期选择器页面calendar.htm。首先，添加两个下拉列表，用于选择要显示的年份和月份，然后制作一个7行7列的表格，其中最顶行用于标记星期，其他行显示日期。关键代码如下。
onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'">
举一反三
根据本实例，读者可以：
开发电子商务管理系统中的订单查询模块；
开发企业进销存管理系统中的数据查询模块；
开发用户注册模块中的生日选择功能。
1.3 窗口的动画效果
在浏览网页时，许多窗口在打开时，都显示了各种各样的动画效果，这样可以在浏览页面时，给人一种动态、新颖的效果。下面将通过几个典型实例进行详细讲解。
实例014 页面自动滚动
本实例可以方便操作、提高工作效率
实例位置：光盘\mingrisoft\01\014
实例说明
本实例实现在打开页面，当页面出现纵向滚动条时，页面中的内容将从上向下进行滚动，当滚动到页面最底端时停止。运行结果如图1.14所示。图1.14 页面自动滚动
技术要点
本实例主要用window对象的scroll()方法指定窗口的当前位臵。下面对scroll()方法进行详细说明。
scroll()方法的语法格式：
scroll(x,y);
参数说明如下。
● x：屏幕的横向坐标。
● y：屏幕的纵向坐标。
功能：指定窗口滚动坐标的位臵。
实现过程
编写用于实现页面自动滚动的JavaScript代码，代码如下。
举一反三
根据本实例，读者可以：
使页面中的文字上下循环滚动；
使页面中的文字左右循环滚动。
实例015 打开窗口特殊效果
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\015
实例说明
本实例在打开 index.htm 文件后，将弹出“打开窗口特殊效果”页面，在该页面中单击超级链接将打开“明日美食留言薄”页面，在屏幕的左上角会弹出一个窗口，并动态改变窗口的宽度和高度，当窗口的高度和屏幕的高度一致时，继续添加窗口的宽度，直到与屏幕大小相同为止。运行结果如图1.15、图1.16所示。图1.15 打开窗口时的效果图1.16 放大后的窗口效果
技术要点
本实例主要是用 window 对象的 open( )方法来打开一个已有的窗口，用 screen 对象的availHeight属性来获取屏幕可工作区域的高度，用moveTo()和resizeTo()方法来指定窗口的位臵及大小，并用resizeBy()方法使窗口逐渐变大，直到窗口大小与屏幕的工作区大小相同。下面对window对象的moveTo()、resizeTo()和resizeBy()方法分别进行介绍。（1）moveTo()方法
moveTo()方法的语法格式：
window.moveTo(x,y)
参数说明如下。
● x：窗口左上角的x 坐标。
● y：窗口左上角的y坐标。
功能：将窗口移动到指定坐标(x,y)处。（2）resizeTo()方法。
resizeTo()方法的语法格式：
window.resizeTo(x,y)
参数说明如下。
● x：窗口的水平宽度。
● y：窗口的垂直宽度。
功能：将当前窗口改变成(x,y)大小，x、y分别为宽度和高度。（3）resizeBy()方法。
resizeBy()方法的语法格式：
window.resizeBy(x,y)
参数说明如下。
● x：放大或缩小的水平宽度。
● y：放大或缩小的垂直宽度。
功能：将当前窗口改变到指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小。
实现过程（1）在页面中添加一个链接标记，用于调用自定义函数go1()，代码如下。
打开明日美食留言薄（2）编写用于实现打开窗口特殊效果的JavaScript代码。
自定义函数go1()，用于打开指定的窗口，并设臵其位臵和大小，代码如下。
举一反三
根据本实例，读者可以：
指定窗口显示的位置及大小；
用按钮动态改变窗口的大小。
实例016 动态显示窗口
这是一个可以启发思维的实例
实例位置：光盘\mingrisoft\01\016
实例说明
本实例实现在窗口打开时，将窗口设臵为最小的宽度，并使窗口的高度逐渐增加，当窗口的高度与屏幕的高度一致时，使窗口的宽度不断增加，直到与屏幕的宽度相一致。运行结果如图1.17、图1.18所示。图1.17 窗口高度不断增加图1.18 窗口变大后的效果
技术要点
本实例主要应用了screen对象的availWidth和availHeight属性来获得当前屏幕的宽度和高度，并用resizeTo()方法来自动增加窗口的高度和宽度。
resizeTo()方法已在实例015中进行详细讲解，这里不再赘述。
实现过程（1）编写用于实现动态显示窗口的JavaScript代码。
（2）在
标记的窗口载入（onload）事件中调用自定义函数expandingWindow()。代码如下：举一反三
根据本实例，读者可以：
设置打开窗口的大小与屏幕大小相同；
使窗口出现下拉式打开效果。
实例017 慢慢放大的窗口
这是一个可以启发思维的实例
实例位置：光盘\mingrisoft\01\017
实例说明
本实例实现在窗口打开时，将窗口按照指定的大小放在屏幕的中间，并使窗口不断放大，直到窗口大小与屏幕大小相同为止。运行结果如图1.19、图1.20所示。图1.19 窗口放大前的效果
技术要点
本实例主要应用screen对象的availWidth和availHeight属性来获得屏幕工作区域的宽度和高度，并用window对象的resizeTo( )方法来指定窗口的位臵，用window对象的moveTo( )方法使窗口不断变大。
window对象的resizeTo( )和moveTo( )方法的介绍可参见实例015 中的技术要点。
实现过程（1）编写用于实现慢慢放大的窗口的JavaScript代码。图1.20 窗口慢慢放大的效果
自定义变量，用于获取屏幕的大小，并将窗口放在屏幕指定的位臵。
（2）在
标记的窗口载入（onload）事件中调用自定义函数blow()，代码如下。举一反三
根据本实例，读者可以：
将窗口慢慢缩小；
使窗口在右下角慢慢放大。
实例018 下降式浏览器
本实例是一个定义窗口的程序
实例位置：光盘\mingrisoft\01\018
实例说明
本实例是在窗口打开时，将整个窗口放在屏幕的最上面，使窗口无法在屏幕中进行显示，然后动态地使窗口进行下移，直到窗口显示在屏幕的左上角为止。运行结果如图1.21所示。图1.21 下降式浏览器
技术要点
本实例主要应用了 screen 对象的 availHesht 属性来获得当前屏幕工作区的高度，并用window对象的moveBy()方法使窗口自动下移。下面对window对象的moveBy()方法进行详细介绍。
moveBy()方法的语法格式：
window.moveBy(x,y)
参数说明如下。
● x：水平位移量。
● y：垂直位移量。
功能：按照指定位移量设臵窗口的大小。
实现过程（1）编写用于实现下降式浏览器的JavaScript代码。
（2）在
标记的窗口载入（onload）事件中调用自定义函数drop()。举一反三
根据本实例，读者可以：
制作一个从左页慢慢移出的浏览器；
制作一个飞出的浏览器。
实例019 旋转的窗口
这是一个可以启发思维的实例
实例位置：光盘\mingrisoft\01\019
实例说明
本实例是在窗口打开时，将窗口的左上角的位臵以圆形的轨迹进行移动，使窗口产生旋转的效果。运行结果如图1.22所示。图1.22 旋转的窗口
技术要点
本实例主要使用公式 r*Math.cos((i*Math.PI)/180)和 r*Math.sin((i*Math.PI)/180)来计算出圆形轨迹，其中，r表示圆的半径，i表示圆周（在这里i的值为0～360，通过i值可以计算出圆各个点的位臵），然后使用window对象的moveTo()方法使窗口进行旋转。
moveTo()方法的介绍可参见实例015中的技术要点。
实现过程
编写用于实现旋转窗口的JavaScript代码。
举一反三
根据本实例，读者可以：
使窗口以不规则的状态进行移动；
使窗口以阶梯状进行向下移动。
实例020 移动的窗口
这是一个可以提高分析能力的实例
实例位置：光盘\mingrisoft\01\020
实例说明
本实例实现在窗口打开时，将窗口放在屏幕的左上角，并将窗口从左到右以随机的角度进行移动，当窗口的外边框碰到屏幕四边时，窗口将进行反弹。运行结果如图1.23、图1.24所示。图1.23 窗口移动前的效果图1.24 窗口移动后的效果
技术要点
本实例的主要思想是用screen对象的availWidth和availHeight属性来获得当前屏幕的宽度和高度，然后判断窗口的4个边是否碰到屏幕的4个边界，如果碰到，则进行反弹。
resizeTo()和moveTo()方法的介绍可参见实例015。
实现过程
编写用于实现移动窗口的JavaScript代码。
举一反三
根据本实例，读者可以：
使窗口在屏幕中随意走动；
使窗口出现下拉式打开效果。
实例021 震动的窗口
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\01\021
实例说明
本实例实现的是窗口震动的效果，在窗口中可以单击“左右震动”、“上下震动”和“整屏震动”3个按钮，使窗口有3种不同的震动效果。运行结果如图1.25所示。图1.25 震动的窗口
技术要点
实现本实例主要使用了window对象的moveBy( )方法，该方法的详细介绍可参见实例018中的技术要点。
实现过程（1）在页面中添加3个按钮，并调用各自的单击事件，代码如下。
="flap_xy(5)">（2）编写用于实现震动窗口的JavaScript代码。
自定义函数flap_xy()，用于实现窗口的整屏震动，具体代码如下。
举一反三
根据本实例，读者可以：
使窗口按一定的轨迹进行移动。
实例022 弹出广告窗口
本实例可以美化界面
实例位置：光盘\mingrisoft\01\022
实例说明
在浏览网页时，当打开一个特定的网页时，会在屏幕的右下角慢慢浮出一个广告窗口，这样可以起到一个宣传的作用，本实例通过打开一个主页面，在屏幕的右下角自动以上移的方式弹出一个广告窗口。运行结果如图1.26所示。图1.26 弹出广告窗口
技术要点
本实例主要实现在主页面打开时，用 window 对象的 open()方法调用子窗口，并设臵子窗口的大小与位臵，再打开子窗口后，用window对象的moveTo()方法将子窗口逐渐上移。
moveTo ()方法的介绍可参见实例015。
实现过程（1）主窗口的相关代码。
编写用于实现调用广告窗口的JavaScript代码。
（2）广告窗口的相关代码。
编写用于实现广告窗口从右下角上移的JavaScript代码。
举一反三
根据本实例，读者可以：
关闭窗口时，弹出广告；
关闭广告窗口时，使主窗口显示其他网页。
1.4 窗口控制
在制作网站时，对窗口的控制是十分重要的，例如可以根据屏幕分辨率的大小来控制页面的大小，也可以根据需要将页面进行最大化显示或对页面的大小进行控制。下面将通过几个典型实例进行详细讲解。
实例023 窗口始终在最上面
本实例可以方便操作、提高工作效率
实例位置：光盘\mingrisoft\01\023
实例说明
浏览网页时，经常会看到一些广告总是浮动于所有窗口的最上面，这样使浏览者不得不观看广告中的内容。本实例将指定一个页面总在窗口的最上面。运行结果如图1.27所示。图1.27 窗口始终在最上面
技术要点
本实例主要应用了document对象的focus()方法来获得窗口的焦点。用window对象的open()方法所创建的窗口进行操作，将其返回值（窗口对象）赋给一个变量，然后用该变量对创建的窗口进行操作。下面对window对象的open()方法进行详细介绍。
window对象open()方法的语法格式：
WindowVar=window.open(url,windowname[,location]);
参数说明如下。
● URL：用于打开一个新的浏览器窗口，并在新窗口中装入一个指定的URL 地址。
● windowname：打开一个新的浏览器窗口时，指定窗口的名称。
● location：对窗口属性进行设臵，其可选参数如表1.5 所示。表1.5 location参数的取值续表
功能：打开一个新的窗口，并在窗口中装载指定URL地址的网页。
实现过程（1）在页面中添加一个按钮，用于显示窗口，代码如下。
（2）编写用于实现选中表格中单元格的JavaScript代码。
自定义函数newform()，用于创建一个窗口，具体代码如下。
举一反三
根据本实例，读者可以：
实现用window对象的open( )方法调用其他的窗口；
指定新窗口的大小及位置。
实例024 窗口的最小化、最大化
本实例是一个提高规范化的实例
实例位置：光盘\mingrisoft\01\024
实例说明
在浏览网页时，有些网页会自动对窗口的显示状况进行调试。本实例是通过页面中的“最小化”和“最大化”按钮控制窗口的最小化和最大化。运行结果如图1.28所示。图1.28 窗口的最大化、最小化
技术要点
本实例主要应用到了
标记的一般格式为：
参数说明如下。
● name：是参数的名字。
● value：指定参数的值。
● valuetype：指定怎样表示参数的值。
● type：指定媒体类型。
实现过程（1）在页面中添加两个按钮和一个层，代码如下。
（2）编写用于实现窗口最大化、最小化的JavaScript代码，具体代码如下。举一反三
根据本实例，读者可以：
使窗口最大化后，最大化按钮显示还原。
实例025 频道方式窗口
本实例可以方便操作、提高工作效率
实例位置：光盘\mingrisoft\01\025
实例说明
在浏览网页时，经常会看到一些网页以频道的方式进行打开。本实例在打开“index.htm”文件后，将弹出“频道方式窗口”页面，在该页面中单击“频道方式窗口”按钮，将以频道方式打开“明日美食留言薄”页面。运行结果如图1.29所示。图1.29 频道方式窗口
技术要点
本实例主要应用 window 对象的 open( )方法中的 channelmode 参数值来使创建窗口以频道方式进行显示。
window对象open( )方法中参数的详细说明可参见实例023。
实现过程（1）在页面中添加一个按钮，代码如下。
（2）编写用于实现频道方式窗口的JavaScript代码。举一反三
根据本实例，读者可以：
去掉窗口的状态栏；
去掉窗口中的工具栏。
实例026 全屏显示
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\01\026
实例说明
在制作网站时，有时根据网页内容的需要，要将网页进行全屏显示。本实例在打开页面后，单击页面中的“全屏显示”按钮，将页面进行全屏显示。运行结果如图1.30、图1.31所示。图1.30 窗口打开时的效果图1.31 窗口全屏显示效果
技术要点
本实例主要应用window对象的open( )方法中的fullscreen 参数，将当前窗口重新创建，并进行全屏显示。这样做可以避免在打开其他窗口时，也使其全屏显示。
另外，本实例还使用了document对象的location属性，该属性用于指定当前窗口。
实现过程（1）在页面中添加两个按钮，将其放臵在层中，并用层的align属性的center值使按钮居中于页面，代码如下。
value="全屏显示">
="window.close()">
（2）编写用于实现全屏显示的JavaScript代码。举一反三
根据本实例，读者可以：
制作一个与F11（全屏）键相同的功能。
实例027 设置窗口大小和位置
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\01\027
实例说明
本实例实现在窗口中设臵要打开页面的高度和宽度，以及在当前屏幕中的位臵。运行结果如图1.32所示。图1.32 设臵窗口大小和位臵
技术要点
本实例主要通过用户输入的值来动态改变 window 对象的 open( )方法中的一些参数值，从而实现动态设臵窗口的大小和位臵。
window对象的open( )方法的详细介绍可参见实例001。
实现过程（1）在页面中添加相关的组件，用于输入要创建窗口的位臵及大小，代码如下。
页面大小：
宽：
高：
页页位置：
X：
Y：
（2）编写用于实现设臵窗口大小和位臵的JavaScript代码。举一反三
根据本实例，读者可以：
用window对象的open( )方法任意打开指定路径下的HTML文件。
试读结束[说明：试读内容隐藏了图片]