实例110 动态添加表单中的元素_HTML5程序开发范例宝典-QQ阅读男生玄幻网

书名：HTML5程序开发范例宝典
作者名：韩旭高飞孙桂杰编著
本章字数：355字
更新时间：2024-12-21 21:59:31

4.3 JavaScript操作表单

实例099 通过正则表达式验证日期

本实例是一个提高录入准确性的程序

实例位置：光盘\mingrisoft\04\099

实例说明

为了确保用户输入信息的有效性，应该检查用户输入信息的合法性。在客户端应用JavaScript判断输入信息的合法性可以提高程序的执行速度。例如，本例在提交表单执行查询语句之前，先判断输入的日期是否合法，就可以减少服务器的工作量。运行本实例，在“从”字后面的文本框中输入“2007-2-1”，在“到”字后面的文本框中输入“2007-2-29”后，单击“查询”按钮后，将弹出图4.36所示的对话框，原因是2007年的2月没有29日。

图4.36 通过正则表达式验证日期

技术要点

在JavaScript 中使用正则表达式主要是通过正则表达式对象实现的，使用正则表达式对象的语法格式如下：

语法1：

re=/pattern/[flags]d

语法2：

re=new RegExp("pattern",["flags"])

功能：本对象包含正则表达式模式以及表明如何应用模式的标志。

参数说明：

● re：必选项，将要赋值为正则表达式模式的变量名。

● pattern：必选项，要使用的正则表达式模式。如果使用语法1，用“/”字符分隔模式。如果用语法2，用引号将模式引起来。

● flags：可选项，用于指定匹配标志。如果使用语法2 要用引号将flag 引起来。标志可以组合使用，常用的标记有g（全文查找出现的所有pattern）、i（忽略大小写）、m（多行查找）。

使用test方法rgexp.test(str)可以返回一个boolean值，它指出在被查找的字符串中是否存在模式。

注意：在JavaScript中调用正则表达式时，正则表达式以正斜线“/”开头和结尾。

验证日期格式是否正确时，需要注意以下几点。

（1）年份由4位数字组成。

（2）月份由1～12的数字组成。

（3）1、3、5、7、8、10、12月为31天；4、6、9、11月为30天。

（4）闰年的2月为29天，非闰年的2月为28天。

（5）日期分隔符可以是“/”或“-”。

验证日期格式的正则表达式如下。

/^((((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13578]|1[02])(\/|\-)(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13456789]|1[012])(\/|\-)(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)0?2(\/|\-)(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/

实现过程

（1）应用JavaScript 编写验证输入的日期格式是否正确的函数 CheckDate()，该函数只有一个参数INDate，用于指定要判断的日期字符串，返回值为true或false，代码如下：

function CheckDate(str){

//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号

var Expression=/^((((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13578]|1[02])(\/|\-)(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)(0?[13456789]|1[012])(\/|\-)(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})(\/|\-)0?2(\/|\-)(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468] [048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;

var objExp=newRegExp(Expression);

if(objExp.test(str)==true){

return true;

}else{

return false;

}

</script>

（2）编写自定义的JavaScript函数check()，用于在提交表单前判断用户输入是否合法，在该函数中再调用CheckDate()函数判断输入的日期是否正确，如果不正确则给予提示，否则提交表单。关键代码如下：

function check(myform){

if(myform.sDate.value==""){

alert("请输入开始日期");myform.sDate.focus();return;

}

if(CheckDate(myform.sDate.value)){

alert("您输入的开始日期不正确！\n请注意日期格式（如：2007/07/17或2007-07-17）或闰年！");myform.sDate.focus();return;

}

if(myform.eDate.value==""){

alert("请输入截止日期");myform.eDate.focus();return;

}

if(CheckDate(myform.eDate.value)){

alert("您输入的截止日期不正确！\n请注意日期格式（如：2007/07/17或2007-07-17）或闰年！");myform.eDate.focus();return;

}

myform.submit();

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

在会员或用户注册页面中，判断输入的生日是否正确。

在日期型数据查询时，判断输入的日期是否正确。

实例100 通过正则表达式验证电话号码

本实例是一个提高录入规范性的程序

实例位置：光盘\mingrisoft\04\100

实例说明

在网络应用程序的数据录入页面中，经常需要对输入的电话号码进行判断，在JavaScript中判断电话号码可以通过正则表达式实现。运行本实例，在“家庭电话”文本框中输入联系电话号码“0431-49766”，单击“确定保存”按钮，将返回图 4.37 所示的页面，提示输入的电话号码不正确。

图4.37 通过正则表达式验证电话号码

技术要点

一个正则表达式就是由普通字符（例如字符a～z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

验证电话号码的正则表达式如下：

/(\d{3}-)?\d{8}|(\d{4}-)(\d{7})/

实现过程

（1）使用JavaScript编写一个用于检测电话是否正确的函数checktel()，该函数只有一个参数tel，用于获取输入的联系电话号码，返回值为true或false。代码如下：

function checktel(tel){

var str=tel;

//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号

var Expression=/(\d{3}-)?\d{8}|(\d{4}-)(\d{7})/;

var objExp=newRegExp(Expression);

if(objExp.test(str)==true){

return true;

}else{

return false;

}

</script>

（2）调用Mycheck()函数判断家庭电话是否正确，并显示相应的提示信息。关键代码如下：

function Mycheck(myform){

if(myform.familytel.value==""){

alert("请输入家庭电话!!");myform.familytel.focus();return;

}

if(!checktel(myform.familytel.value)){

alert("您输入的家庭电话不正确!");myform.familytel.focus();return false;

}

form1.submit();

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

实现用户注册模块中的用户电话号码的判断。

实现企业客户管理系统中的添加客户信息时判断联系电话。

实例101 验证输入的字符串是否为汉字

本实例是一个提高录入规范性的程序

实例位置：光盘\mingrisoft\04\101

实例说明

在动态网站的数据录入页面中，经常需要对用户输入的真实姓名进行判断，例如，某博客网站要求输入的真实姓名为汉字，所以如果用户输入的内容不为汉字将被视为不合法。本实例中的真实姓名被限制为只能输入汉字。运行本实例，在“真实姓名”文本框中输入“hui”后，单击“确定保存”按钮，将弹出图4.38所示的对话框，提示您输入的真实姓名不正确。

图4.38 验证输入的字符串是否为汉字

技术要点

实现验证输入的字符串是否为汉字的方法有很多种，例如可以通过正则表达式进行判断，也可以根据字符的ASCII码进行判断。其中应用正则表达式判断比较方便、快捷。实现验证输入的字符串是否为汉字的正则表达式如下：

/[^\u4E00-\u9FA5]/

说明：关于在JavaScript中调用正则表达式的详细介绍请参考实例099。

实现过程

（1）使用JavaScript 编写一个用于检测用户输入的真实姓名是否为汉字的函数checkrealname ()，该函数只有一个参数 realname，用于获取输入的真实姓名，返回值为 true或false。代码如下：

function checkrealname(realname){

var str=realname;

//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号

var Expression=/[^\u4E00-\u9FA5]/;

var objExp=newRegExp(Expression);

if(objExp.test(str)==true){

return true;

}else{

return false;

}

</script>

（2）调用check()函数判断用户输入的真实姓名是否为汉字，并显示相应的提示信息。关键代码如下：

function check(myform){

if(myform.realname.value==""){

alert("请输入真实姓名!");myform.realname.focus();return;

}

if(checkrealname(myform.realname.value)){

alert("您输入的真实姓名不正确!");myform.realname.focus();return;

}

myform.submit();

}

</script>

（3）在页面的合适位置添加“确定保存”按钮，在该按钮的 onClick 事件中调用check()函数验证输入的字符串是否为汉字，代码如下：

举一反三

根据本实例，读者可以进行以下操作。

限制在线订单中的联系人姓名必须为汉字。

限制进销存管理系统中的经手人、联系人字段必须为汉字。

实例102 验证身份证号码

本实例是一个提高录入规范性的程序

实例位置：光盘\mingrisoft\04\102

实例说明

在动态网站的会员注册页面中，经常需要对用户输入的身份证号码进行判断，因此笔者编写了一个验证身份证号码的函数，在需要时进行调用即可。例如本实例就应用了该函数，运行本实例，在“身份证号”文本框中输入“220104198007”后，单击“确定保存”按钮，将弹出图4.39所示的对话框，提示您输入的身份证号码不正确。

图4.39 验证身份证号码

技术要点

要实现验证身份证号码首先需要了解身份证号码的编码规则，现在有效的身份证有两种编码规则，分别是15位居民身份证号码和18位居民身份证号码，下面分别给出这两种编码规则。

15位的居民身份证的号码为：

aabb cc yymmdd nnn

其中，aa代表省份编码，bb代表省地区编码，cc代表地区级县（市）编码，yymmdd代表出生年月日，其中，yy用年份的后两位表示；nnn代表同一地区出生年月日相同的人的序号，该序号以户主为准，子女依照户主序号确定，奇数=男，偶数=女，且女=男+1。

18位的居民身份证号码为：

aabb cc yyyymmdd nnn r

其中，aa bb cc 所代表的含义与15 位的相同，yyyymmdd 代表出生年月日，年份为4 位；nnn代表同一地区出生年月日相同的人的序号；r为校验位，数字是1～10，因为不能用10（否则就成了19位数），所以用X代表10。

验证身份证号码的正则表达式如下：

/^\d{17}[\d|X]|^\d{15}$/

说明：关于在JavaScript中调用正则表达式的详细介绍请参考实例099。

实现过程

（1）使用JavaScript编写一个用于验证身份证号码是否合法的函数checkeNO()，该函数只有一个参数NO，用于获取输入的身份证号码，返回值为true或false。代码如下：

function checkeNO(NO){

var str=NO;

//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号

var Expression=/^\d{17}[\d|X]|^\d{15}$/;

var objExp=newRegExp(Expression);

if(objExp.test(str)==true){

return true;

}else{

returnfalse;

}

</script>

（2）调用check()函数判断用户输入的身份证号码是否合法，如果不合法，将提示用户输入的身份证号码不正确。关键代码如下：

function check(myform){

if(myform.number.value==""){

alert("请输入身份证号码!");myform.number.focus();return;

}

if(!checkeNO(myform.number.value)){

alert("您输入的身份证号码不正确!");myform.number.focus();return;

}

myform.submit();

}

</script>

（3）在页面的合适位置添加“确定保存”按钮，在该按钮的 onClick 事件中调用check()函数验证身份证号码是否合法，代码如下：

举一反三

根据本实例，读者可以进行以下操作。

在办公自动化管理系统中判断员工的身份证号是否合法。

根据正确的身份证号自动计算员工的年龄及出生日期。

实例103 验证车牌号码

本实例是一个提高录入规范性的程序

实例位置：光盘\mingrisoft\04\103

实例说明

在开发动态网站时，经常需要对用户输入的信息进行验证，例如在物流信息网的车辆信息发布页面中，就需对输入的车牌号码进行判断。下面将通过具体实例介绍如何编写验证车牌号码是否正确的函数。运行本实例，在“车牌号码”文本框中输入“JA-0123”后，单击“提交”按钮，将弹出图4.40所示的对话框，提示输入的车牌号码不正确。

图4.40 验证车牌号码

技术要点

要实现验证车牌号码是否正确，首先需要了解车牌号码的编码规则。下面给出验证国内非军用车车牌号码时应注意的几点规则。

（1）第1个字符必须为汉字。

（2）第2个字符必须为字母（a～z或A～Z）。

（3）第3位为分隔符“-”。

（4）分隔符后面由5位的数字或字母组成。

根据上面的规则得出验证车牌号码是否正确的正则表达式如下：

/^[\u4E00-\u9FA5]?[a-zA-Z]-\w{5}$/

说明：关于在JavaScript中调用正则表达式的详细介绍请参考实例099。

实现过程

（1）使用JavaScript 编写一个用于验证车牌号码是否正确的函数 checkNo()，该函数只有一个参数str，用于获取输入的车牌号码，返回值为true或false。代码如下：

function checkNo(str){

var Expression=/^[\u4E00-\u9FA5]?[a-zA-Z]-\w{5}$/;

var objExp=newRegExp(Expression);

returnobjExp.test(str)

}

</script>

（2）编写 check()函数判断用户输入的车牌号码是否正确，如果不正确，将提示用户输入的车牌号码不正确。关键代码如下：

function check(form){

if(form.carNo.value==""){

alert("请输入车牌号码!");form.carNo.focus();return;

}

if(!checkNo(form.carNo.value)){

alert("您输入的车牌号码不正确!");form.carNo.focus();return;

}

form.submit();

}

</script>

（3）在页面的合适位置添加“提交”按钮，在该按钮的onClick事件中调用check()函数验证车牌号码是否合法，代码如下：

举一反三

根据本实例，读者可以进行以下操作。

判断用户输入的单据号码是否正确。

实例104 验证数量和金额

本实例是一个提高录入准确性的程序

实例位置：光盘\mingrisoft\04\104

实例说明

在动态网站开发时，经常会遇到限制用户输入数据类型的问题。例如，“数量”文本框通常只能输入正整数，而“金额”文本框又只能输入数值型数据。这就要求程序员在开发网站时，对用户输入的数值型数据进行判断。例如本实例的采购信息登录页面，就要求对单价和数量进行控制。运行本实例，在“单价”文本框中输入“-”时，系统将弹出图4.41所示的对话框，提示用户输入错误。

图4.41 验证数量和金额

技术要点

要验证输入的金额和数量（只能是正整数）是否合法，首先需要知道它们各有何特点，下面分别说明。

● 金额：通常情况下，金额为数值型数据，包括小数，如7.6。

● 数量：通常情况下，数量一般为正整数，即只能由0～9 之间的数字组成，如770。

根据上面的分析，可以总结出判断数量和金额的方法。

判断金额可以使用JavaScript的全局函数inNaN()，其关键代码如下：

isNaN(form1.dj.value)

判断数量可以使用正则表达式，其关键代码如下：

str=form1.sl.value;

var Expression=/^[1-9]+(\d*$)/;

var objExp=newRegExp(Expression);

if(objExp.test(str)==false){

alert("您输入的不是有效值（请输入自然数）！");

form1.sl.focus();form1.sl.select();return;

}

说明：关于在JavaScript中调用正则表达式的详细介绍请参考实例099。

实现过程

（1）应用JavaScript编写验证输入的单价（数值型数据）是否合法的函数checkPrice()。代码如下：

function checkPrice(){

if (form1.dj.value==0 &&form1.dj.value==""){

alert("请输入单价！");form1.dj.focus();form1.dj.select();return;}

if(isNaN(form1.dj.value)){

alert("您输入的单价不是有效值！");form1.dj.focus();form1.dj.select();return;

}

</script>

（2）应用JavaScript编写验证输入的数量（数值型数据）是否合法的函数checkNum()。代码如下：

function checkNum(){

if (form1.sl.value==0 &&form1.sl.value==""){

alert("请输入数量！");form1.sl.focus();form1.sl.select();return;

}

str=form1.sl.value;

var Expression=/^[1-9]+(\d*$)/;

var objExp=newRegExp(Expression);

if(objExp.test(str)==false){

alert("您输入的不是有效值（请输入自然数）！");

form1.sl.focus();form1.sl.select();return;

}

</script>

（3）在网页的适当位置添加用于获取单价、数量和金额的文本框，并为单价和数量文本添加onkeyup事件执行的操作，用于判断输入的单价和数量是否合法。关键代码如下：

</font><span class="style1">(元 )</span><font color="#FF0000">*</font></td>

</tr>

</font><font color="#FF0000">*</font><span class="style1">( 只能是自然数 )</span></td>

</tr>

</tr>

举一反三

根据本实例，读者可以进行以下操作。

验证用户输入的其他数据类型。

实例105 验证字符串是否以指定字符开头

本实例是一个实用、方便的程序

实例位置：光盘\mingrisoft\04\105

实例说明

在制作网页时，有时需要判断输入的字符串是否以指定的字符开头。本实例将介绍如何通过正则表达式验证输入字符串是否以指定的字符开头。运行本实例，在“请输入字符串的起始字符”文本框中输入“220”，在“请输入要判断的字符串”文本框中输入“220104198007”，单击“判断”按钮，将弹出图4.42所示的对话框。

图4.42 验证字符串是否以指定字符开头

技术要点

验证字符串是否以指定的字符开头，可以使用正则表达式的锚元素“^”实现，例如验证字符串是否以字符“a”开头的正则表达式如下：

/^a/

正则表达式的锚元素“^”用于匹配字符串的开头，在多行检索中，匹配一行的开头。

由于本实例中的起始字符是通过变量传递的，所以需要使用下面的代码实现：

eval("/^"+startStr+"/")

在上面的代码中，eval()方法用于计算JavaScript代码串，并返回结果。

说明：关于在JavaScript中调用正则表达式的详细介绍请参考实例099。

实现过程

（1）应用JavaScript编写验证字符串是否以指定字符开头的函数checkOccur()，该函数有两个参数 startStr（用于指定字符串的起始字符）和 inStr（用于指定要判断的字符串），返回值为true或false。代码如下：

function checkOccur(startStr,inStr){

var Expression=eval("/^"+startStr+"/");

var objExp=newRegExp(Expression);

returnobjExp.test(inStr);

}

</script>

（2）编写自定义的JavaScript函数check()，用于在提交表单前判断用户输入是否合法，在该函数中再调用checkOccur()函数验证字符串是否以指定的字符开头，并给予提示。关键代码如下：

function check(myform){

var startStr=myform.startStr.value;

var inStr=myform.inStr.value;

if(startStr==""){

alert("请输入字符串的起始字符！");

myform.startStr.focus();return;

}

if(inStr==""){

alert("请输入要判断的字符串！");

myform.inStr.focus();return;

}else{

if(checkOccur(startStr,inStr)){

alert("指定字符串是以["+startStr+"]开头！");

return;

}else{

alert("指定字符串不是以["+startStr+"]开头！");

return;

}

</script>

（3）在页面的合适位置添加“判断”按钮，在该按钮的onClick事件中调用check()函数验证身份证号码是否合法，代码如下：

举一反三

根据本实例，读者可以进行以下操作。

实现在线论坛或留言簿中限制留言主题的字数。

实现新闻网中限制新闻标题的字数。

实例106 在网页中实现自动增加表格效果

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\106

实例说明

本实例将在网页中实现自动增加表格的效果。运行实例，结果如图4.43所示。由图可以看到，每当单击一次“+”按钮，表格将自动增加一行。

图4.43 自动增加行的表格

技术要点

本实例主要应用DOM中的insertRow()方法，该方法用于在表格中的指定位置插入一个新行。语法如下：

tableObject.insertRow(index)

该方法创建一个新的TableRow对象，表示一个新的<tr>标记，并把它插入表中的指定位置。新行将被插入index所在行之前。如果index等于表中的行数，则新行将被附加到表的末尾；如果表是空的，则新行将被插入到一个新的<tbody>段，该段自身会被插入表中。

实现过程

（1）创建index.html文件，在文件中创建一个两行两列的表格，然后创建一个“+”按钮，当单击该按钮时执行addRow()函数。代码如下：

<legend>可自动增加行的表格</legend>

<tableid="myTable" border="1" width="100%">

<thead>

<tr>

<th>第一列标题</th>

<th>第二列标题</th>

</tr>

</thead>

<tbody>

<tr>

<td>第一列内容</td>

<td>第二列内容</td>

</tr>

</tbody>

</table>

</fieldset>

（2）在页面中编写JavaScript脚本函数addRow()，通过insertRow()方法为表格插入新行。代码如下：

function addRow(){

var myTable=document.getElementById("myTable");

var tBodies =myTable.tBodies;

var tbody=tBodies[0];

var tr =tbody.insertRow(tbody.rows.length);

var td1 =tr.insertCell(0);

td1.innerHTML="插入新行的第1列";

var td2 =tr.insertCell(1);

td2.innerHTML="插入新行的第2列";

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

在表格的开头插入一个新行。

在表格中插入新行并对表格内容进行编辑。

实例107 开发一个计数器程序

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\107

实例说明

本实例将通过JavaScript脚本开发一个简单的计数器程序。运行实例，结果如图4.44所示。当单击“开始计数”按钮时，文本框中的数字将不断进行加1的操作；当单击“暂停计数”按钮时，文本框中的数字加1操作将会暂停，再次单击“开始计数”按钮，文本框中的数字将继续进行加1的操作。

图4.44 一个简单的计数器

技术要点

本实例主要应用window对象的setTimeout()方法和clearTimeout()方法。

setTimeout()方法用于设置一个超时，以便在超出这个时间后触发某段代码的运行。基本语法如下：

timerId=setTimeout(要执行的代码,以毫秒为单位的时间);

其中，“要执行的代码”可以是一个函数，也可以是其他 JavaScript 语句；“以毫秒为单位的时间”指代码执行前需要等待的时间，即超时时间。

clearTimeout()方法可取消由setTimeout()方法设置的超时。其语法格式如下：

clearTimeout(timerId);

其中，timerId为设置超时函数时返回的标识符。

实现过程

（1）创建index.html文件，在文件中创建表单，在表单中创建一个用于存储数字的文本框和两个普通按钮，当单击这两个按钮时执行不同的JavaScript函数。代码如下：

<formid="form1" name="form1" method="post" action="">

</form>

（2）在页面中编写JavaScript代码，定义3个函数，其中，beg()函数的作用是获取文本框中的数值并进行加1操作；sta()函数的作用是执行beg()函数；pau()函数的作用是暂停文本框中的数字变化。具体代码如下：

var flag=0;

var timeID;

functionbeg(){

var i=form1.num.value;

i++;

form1.num.value=i;

timeID=setTimeout("beg()",1000);

}

functionsta(){

if(flag==0){

beg();

flag=1;

}

functionpau(){

clearTimeout(timeID);

flag=0;

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

实现重启计数器的功能。

开发一个倒计时程序。

实例108 判断用户是否选择了文本框中的指定文本

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\108

实例说明

本实例将应用JavaScript 技术判断用户是否选择了文本框中的指定文本。运行实例，当用户选择了文本框中的“HTML”后，将弹出提示信息，如图4.45所示。

图4.45 选择指定文本后弹出提示信息

技术要点

本实例主要应用JavaScript中的onselect事件。onselect事件是当文本内容被选择时触发事件处理程序。

实现过程

（1）创建index.html文件，在文件中创建一个表单和一个文本框，设置文本框的默认值为“hello!HTML”，并通过onselect事件调用Tselect()函数。代码如下：

<formname="form1" method="post" action="">

</form>

（2）在页面中编写JavaScript函数Tselect()，判断当用户选择了文本框中的指定文本时弹出提示信息。代码如下：

functionTselect(){

var txt=document.selection.createRange().text;//获取当前所选中的文本

if (txt=="HTML"){

alert("你所选择的内容为："+txt);

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

输出用户选择的文本内容。

选择文本框文本时弹出对话框。

实例109 实现一个动态菜单样式

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\109

实例说明

本实例将应用JavaScript技术实现一个动态导航菜单样式。在Opera浏览器中运行本实例，当单击某个主菜单时，将展开该主菜单下的子菜单，例如，单击“用户管理”主菜单，将弹出该主菜单下的子菜单，如图4.46所示。

图4.46 弹出主菜单下的子菜单

技术要点

本实例主要应用了JavaScript技术和HTML5中新增的hidden属性共同来实现子菜单的显示与隐藏。JavaScript代码如下：

function init(){

document.getElementById("menu1").hidden=true;

document.getElementById("menu2").hidden=true;

document.getElementById("menu3").hidden=true;

}

functionopenmenu1(){

if(document.getElementById("menu1").hidden===true)

document.getElementById("menu1").hidden=false;

else

document.getElementById("menu1").hidden=true;

}

functionopenmenu2(){

if(document.getElementById("menu2").hidden===true)

document.getElementById("menu2").hidden=false;

else

document.getElementById("menu2").hidden=true;

}

functionopenmenu3(){

if(document.getElementById("menu3").hidden===true)

document.getElementById("menu3").hidden=false;

else

document.getElementById("menu3").hidden=true;

}

</script>

实现过程

（1）创建index.html文件，在文件的<body>标记中，首先添加一个<div>标记，用于显示导航菜单的标题，然后，添加一个自定义列表，用于添加主菜单项及其子菜单项，其中主菜单项由<dt>标记定义，子菜单项由<dd>标记定义，最后再添加一个<div>标记，用于显示导航菜单的结尾，关键代码如下：

<bodyonLoad="init()">

<dl>

</dd>

</dd>

</dd>

<dtclass="title"><a href="#">退出系统</a></dt>

</dl>

</body>

（2）编写CSS样式，用于控制导航菜单的显示样式，具体代码如下：

<styletype="text/css">

dl{

width: 158px;

margin:0px;

}

dt{

font-size: 14px;

padding: 0px;

margin:0px;

width:146px;　　　　　　/*设置宽度*/

height:19px;　　　　　　/*设置高度*/

background-image:url(images/title_show.gif);　　　　/*设置背景图片*/

padding:6px 0px0px 12px;

color:#215dc6;

font-size:12px;

cursor:pointer;

}

dd{

color:#000;

font-size: 12px;

margin:0px;

}

text-decoration: none;　　　/*不显示下划线*/

}

a:hover {

color:#FF6600;

}

#top{

width:158px;　　　　　　/*设置宽度*/

height:30px;　　　　　　/*设置高度*/

background-image:url(images/top.gif);　　/*设置背景图片*/

}

#bottom{

width:158px;　　　　　　/*设置宽度*/

height:31px;　　　　　　/*设置高度*/

background-image:url(images/bottom.gif);　　　/*设置背景图片*/

}

.title{

background-image:url(images/title_quit.gif);　　　　　/*设置背景图片*/

}

.item{

width:146px;　　　　　　/*设置宽度*/

height:15px;　　　　　　/*设置高度*/

background-image:url(images/item_bg.gif);　　　/*设置背景图片*/

padding:6px 0px0px 12px;

color:#215dc6;

font-size:12px;

cursor:hand;

background-position:center;

background-repeat:no-repeat;

}

</style>

（3）在页面中编写JavaScript代码，首先定义init()函数，该函数用于隐藏全部子菜单；然后再定义openmenu1()、openmenu2()和openmenu3()函数，这3个函数的作用是控制3个子菜单的显示与隐藏，具体代码如“技术要点”中所示。

举一反三

根据本实例，读者可以进行以下操作。

实现一个动态横向导航菜单样式。

显示当前子菜单，同时隐藏其他主菜单下的子菜单。

实例110 动态添加表单中的元素

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\110

实例说明

本实例将应用JavaScript技术实现动态添加HTML元素的方法，这里被动态添加的是一个文本框。运行实例，当单击“动态添加文本框”按钮后，将会在页面中动态添加一个文本框，结果如图4.47所示。

图4.47 动态添加一个文本框

技术要点

本实例主要应用document 对象的 createElement()方法来实现动态添加一个 HTML元素。createElement()方法可以根据一个指定的类型来创建一个HTML元素。语法如下：

sElement=document.createElement(sName)

参数说明：

● sElement：用来接收该方法返回的一个对象。

● sName：用来设置HTML标记的类型和基本属性。

实现过程

创建index.html文件，在文件中创建一个普通按钮，通过该按钮的onclick事件调用addInput()函数，然后编写JavaScript函数addInput()，实现动态添加文本框的功能。代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>动态添加文本框</title>

<!-

function addInput(){

var txt=document.createElement("input");//动态添加一个input文本框

txt.type="text";//为添加的文本框type属性赋值

txt.name="txt";//为添加的文本框name属性赋值

txt.value="动态添加的文本框";//为添加的文本框value属性赋值

document.form1.appendChild(txt);//把文本框作为子节点追加到表单中

}

-->

</script>

</head>

<body>

<formname="form1">

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

向页面中动态添加一个div元素。

向页面中动态添加一段文本。

实例111 获取文本框并修改其内容

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\111

实例说明

本实例将应用JavaScript 技术实现获取文本框并修改其内容的功能。运行实例，在页面加载后的文本框中将会显示“初始文本内容”，如图 4.48 所示。当单击按钮后将会改变文本框中的内容，如图4.49所示。

图4.48 文本框中显示“初始文本内容”

图4.49 文本框中显示“修改文本内容”

技术要点

本实例主要应用document对象的getElementById()方法来获取指定的文本框，并通过元素的value属性来修改元素的值。getElementById()方法可以通过指定的id来获取HTML元素，并将其返回。语法如下：

sElement=document.getElementById(id)

参数说明：

● sElement：用来接收该方法返回的一个对象。

● id：用来设置需要获取HTML元素的id 值。

实现过程

创建 index.html文件，在文件中创建一个文本框和一个普通按钮，当单击该按钮时将调用chg()函数，然后编写JavaScript 脚本函数chg()，通过getElementById ()方法获取指定的文本框，并通过value属性来修改文本框的值。具体代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>获取文本框并修改其内容</title>

</head>

<body>

<!-

function chg(){

var t=document.getElementById("txt");

t.value="修改文本内容";

}

-->

</script>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

获取指定id的HTML元素的值。

改变指定元素的CSS样式。

实例112 textarea根据内容自动增高

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\112

实例说明

在HTML5中，<textarea>元素能够根据内容的增加自动增加文本域的高度。本实例就来实现这一效果。运行实例，在文本域中输入内容并换行，可以看到，文本域会根据内容的增加而自动增加高度，如图4.50所示。

图4.50 文本域自动增高

技术要点

本实例主要应用表单输入框的onpopertychange事件和oninput事件实现文本域的自动增高。这两个事件都是在元素的属性值发生改变时被触发。onpopertychange 事件用于 IE 浏览器，而oninput事件用于非IE浏览器。

实现过程

创建 index.html 文件，在文件中创建一个文本域，并定义 onpopertychange事件和 oninput事件触发时的JavaScript脚本代码。具体代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>textarea根据内容自动增高</title>

</head>

<body>

<textareaid="tValue" style="overflow-y:hidden; height:20px;"onpropertychange="this.style.height=this.scrollHeight+'px'"oninput="this.style.height=this.scrollHeight+'px'"></textarea>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过onpopertychange事件实时获取文本框中输入的值。

通过onpopertychange限制文本域的字数。

实例113 判断用户选择了几个复选框

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\113

实例说明

本实例将通过JavaScript 脚本实现统计复选框选择个数的效果。运行实例，在页面中选择复选框选项，单击“统计选择个数”按钮后将弹出选择个数的对话框，如图4.51所示。

图4.51 统计选项个数

技术要点

本实例主要应用JavaScript中提供的for循环语句。for循环语句也称为计次循环语句，一般用于循环次数已知的情况，在JavaScript中应用比较广泛。for循环语句的语法格式如下：

for(initialize;test;increment){

statement

}

参数说明：

● initialize：初始化语句，用来对循环变量进行初始化赋值。

● test：循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量超过了该边限，则停止该循环语句的执行。

● increment：用来指定循环变量的步幅。

● statement：用来指定循环体，在循环条件的结果为true 时，重复执行。

实现过程

创建index.html文件，首先在文件中创建表单，在表单中创建6个复选框和一个“统计选择个数”按钮，然后编写JavaScript代码，定义numCheck()函数，在函数中通过for循环语句实现复选框选项个数的统计。具体代码如下：

<html>

<head>

<title>统计选择复选框的个数</title>

</head>

<!-

functionnumCheck(form){

var total=0;　　//定义统计个数的变量

for(var i=0;i<form.ball.length;i++){//遍历所有复选框

if (eval("document.form.ball["+i+"].checked") ==true){//如果已经被选中

total+=1;　　//变量加1操作

}

alert("你选择了"+total+"个选项.");//弹出统计结果

}

-->

</script>

<body>

<formmethod="post" name="form">

<input type="checkbox" name="ball">篮球

<input type="checkbox" name="ball">足球

<input type="checkbox" name="ball">排球

<input type="checkbox" name="ball">网球

<input type="checkbox" name="ball">乒乓球

<input type="checkbox" name="ball">羽毛球

<p>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

输出用户选择的多个复选框的值。

判断用户选择的下拉列表选项的个数。

实例114 实现搜索文本框的效果

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\114

实例说明

本实例将实现一个搜索文本框的效果。实例运行结果如图4.52所示。当单击文本框使其获得焦点时，文本框中的提示文字消失，效果如图4.53所示。

图4.52 实例运行初始效果

图4.53 提示文字消失

技术要点

实现本实例搜索文本框的效果，主要是应用了JavaScript中的onblur事件和onfocus事件。其中，onblur事件是在当前元素失去焦点时触发；onfocus事件是在某个元素获得焦点时触发。在本实例中，实现提示文字显示与消失的关键代码如下：

实现过程

（1）创建index.html文件，在文件中创建表单，在表单中创建一个文本框和一个图像域，在文本框中通过JavaScript脚本实现文本框中提示文字的显示与消失。代码如下：

<formaction="#"name="search">

<tableborder="0"cellpadding="0"cellspacing="0"class="tab_search">

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</form>

（2）在页面中定义表单元素的CSS样式。代码如下：

<styletype="text/css">

.searchinput{

border-right-width: 0px;

padding-left:3px;

width: 168px;

font-family: arial;

float: left;

border-top-width: 0px;

border-bottom-width: 0px;

color:#636365;

margin-left:4px;

font-size: 8pt;

vertical-align: middle;

border-left-width: 0px;

margin-right: 3px;

}

.tab_search{

border-bottom: #cccccc 1px solid;

border-left:#cccccc1pxsolid;

height: 25px;

border-top: #cccccc 1px solid;

border-right:#cccccc1pxsolid;

}

.searchaction{

width: 21px;

float: left;

height: 17px;

}

</style>

举一反三

根据本实例，读者可以进行以下操作。

文本框获得焦点时改变背景颜色。

在注册表单中应用onblur事件和onfocus事件。

实例115 通过下拉菜单动态改变文本框背景颜色

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\115

实例说明

本实例实现通过改变下拉菜单选项动态地改变文本框背景颜色的效果。运行实例，当选择下拉菜单中不同的颜色值时，文本框的背景颜色也会相应随之改变，效果如图4.54所示。

图4.54 动态改变文本框背景颜色

技术要点

实现本实例主要应用了JavaScript中的onchange事件。onchange事件是在当前元素失去焦点并且元素的内容发生改变时触发。该事件一般在下拉菜单中使用。

实现过程

（1）创建index.html文件，在文件中创建表单，在表单中创建一个文本框和一个下拉菜单，当改变下拉菜单选项时调用Fcolor()函数。代码如下：

<formname="form1" method="post" action="">

</select>

</form>

（2）在页面中定义 JavaScript函数 Fcolor()，在函数中获取下拉菜单的选项值，并将其作为文本框的背景颜色。代码如下：

<!-

functionFcolor(){

var e=window.event;

var obj=e.srcElement;

form1.textfield.style.background=obj.options[obj.selectedIndex].value;

}

//-->

</script>

举一反三

根据本实例，读者可以进行以下操作。

实现下拉列表的二级联动功能。

应用onchange事件判断文本框中输入的内容是否符合要求。

实例116 自动计算金额

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\04\116

实例说明

在实际应用中，为了提高操作效率以及保证计算的准确性，可以使用JavaScript 语言编写程序用于自动计算金额。例如，在签订合同页面，根据用户填写的签订合同年限，自动计算用户应缴纳的保证金额，其中每年缴纳的保证金额是固定的。运行本实例，用户在输入合同年限后，程序将自动计算保证金额，并将其显示在文本框内。程序运行结果如图4.55所示。

图4.55 自动计算金额

技术要点

本实例主要应用JavaScript的document对象获取文本框以及隐藏域的值，并将计算后的数值赋值给文本框，使该文本框立即显示计算后得到的保证金总额。document 对象指向 HTML文档，文档是内容与网页中可访问元素的组合。下面介绍document对象的常用属性和方法。

● document.forms[]属性：表示文档中所有表单元素的数组，方括号内的索引值指向数组中的某个元素。

● document.images[]属性：表示使用<img>标记插入到文档中的图像数组。

● document.title属性：获取网页的标题文本。

● document.write()方法：将指定字符串（可以包括 HTML标记语言）写入到 HTML 文档中。

● document.write()方法：将打开一个新的输出流，它将清除当前网页的内容，而只显示指定字符串的内容。

实现过程

（1）自定义一个JavaScript函数count()。该函数首先获取用户在文本框中填写的合同年限数值和隐藏域的保证金额/年，然后将获取到的两个数值进行计算得到保证金总额，并将此计算金额赋值给相应文本框，其关键代码如下：

function count(){

var amount,price,money;

amount=document.form1.txt_year.value;

price=document.form1.txt_by.value;

money=amount*price;

document.form1.txt_bail.value=money;

}

</script>

（2）在页面中创建表格，在表格中创建表单以及表单元素，在“合同年限”文本框的 onBlur 事件（即在文本框失去焦点时触发的事件）中调用自定义的 JavaScript 函数count()，代码如下：

<tablewidth="785" height="508" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.jpg">

<tr>

</tr>

<tr>

<formname="form1">

<tr>

<td height="22" colspan="2" align="center">加盟商信息</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

年

</tr>

<tr>

</tr>

<tr>

</tr>

</form>

</table></td>

</tr>

<tr>

</tr>

</table>

举一反三

根据本实例，读者可以进行以下操作。

实现开发电子商务网站中的购物车程序。

实现开发企业进销存系统中的商品销售程序。

实例117 设置文本框的只读属性

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\04\117

实例说明

在网站后台管理系统中，管理员要经常查看用户基本信息，用户基本信息是指用户在网站前台填写的注册或者申请等信息。虽然管理员具有查看用户基本信息的权限，但是不可以修改用户所提交的信息内容。在设计页面时，设置显示用户信息的文本框为只读属性，即可以查看但不可修改文本框中的文本。运行本实例，当鼠标光标放在文本框上或者在文本框内使用键盘按键时，都将弹出提示信息。程序运行结果如图4.56所示。

图4.56 设置文本框的只读属性

技术要点

为了防止用户修改文本框内的文本，可以设置文本框的readOnly属性值为true，这时将禁止用户更改或删除文本框中的内容。

在自定义的JavaScript函数中，应用document对象获取文本框的realOnly属性值，如果为true（即该文本框为只读属性），则调用alert()方法弹出一个警告对话框显示相应信息。

实现过程

（1）在页面中创建表格，在表格中创建表单以及表单元素，在“用户名”文本框中设置文本框的readOnly属性值为true，并在onKeyDown事件和onMouseup事件中调用JavaScript函数Mycheck()，具体代码如下：

<tablewidth="783" height="477" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.jpg">

<tr>

</tr>

<tr>

<formname="form1">

<tr>

</tr>

<tr>

</tr>

<tr>

<td width="99" align="left">E-mail地址:</td>

</tr>

<tr>

</tr>

<tr>

</select></td>

</tr>

<tr>

是

否</td>

</tr>

<tr>

</td>

</tr>

</form>

</table></td>

</tr>

<tr>

</tr>

</table>

（2）自定义的JavaScript函数Mycheck()的关键代码如下：

function Mycheck(){

if (document.form1.UserName.readOnly){

alert("用户名文本框为只读属性!");return false;

}

elsereturn

returntrue;

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

实现开发电子商务网站中的查看会员基本信息页面。

实现开发在线论坛中的查看注册用户信息页面。

实例118 限制多行文本域输入的字符个数

本实例是一个提高程序安全性的程序

实例位置：光盘\mingrisoft\04\118

实例说明

在网站建设过程中，数据库的设计起着关键作用，为了节省存储数据的空间，提高数据库操作效率，在创建数据表时，通常要对字段大小进行限制。在页面中，为了保证程序的可靠性，根据数据表的结构要对用户输入的信息量进行控制，保证与数据表中的字段属性保持一致。运行本实例，当用户输入内容超过限制的字符个数时，将弹出提示信息。程序运行结果如图4.57所示。

图4.57 限制多行文本域输入的字符个数

技术要点

本实例主要应用JavaScript语言中的if…else条件判断语句和for循环语句，以及应用String对象的charCodeAt( )方法和substring()方法，下面分别进行介绍。

（1）对变量或表达式进行判定时，可以使用if…else条件判断语句，其语法格式如下：

if(条件表达式){

语句序列1　　　　//条件满足时执行

}else{语句序列2　　//条件不满足时执行

}

执行上述语句时，首先计算“条件表达式（任意的逻辑表达式）”的值，如果值为 true，则执行“语句序列1”，执行完毕后结束该if语句；否则执行“语句序列2”，执行后同样结束该if语句。

上述if语句是典型的二路分支结构，其中的else部分可以省略，而且“语句序列”为单一语句时，其两边的大括号可以省略。

例如：

if(document.quesion.value=="") alert("请填写密码提示问题！");

if语句是一种使用很灵活的语句，可以根据需要对if语句进行嵌套使用。所谓嵌套就是将一个if语句当成另一个if语句的执行语句来使用。if语句的嵌套语法格式如下：

if(条件表达式){

if (条件表达式){

语句序列1

}else{

语句序列2

}

}else{

if (条件表达式){

语句序列3

}else{

语句序列4

}

（2）for循环语句是JavaScript语言中应用比较广泛的条件语句。for循环语句通常使用一个变量作为计数器来执行循环，这个变量称为循环变量。

for循环语句的语法格式如下：

for(循环变量赋初值;循环条件;循环变量递增/减值){

循环体;

}

for循环语句的相关参数说明如表4.7所示。

表4.7 for循环语句的参数说明

for循环语句可以使用break语句来中止循环语句的执行。

（3）调用String对象的charCodeAt()方法将返回一个整数，该整数表示字符串对象中指定位置处的字符的Unicode编码。

（4）调用String对象的substring()方法将返回字符串中指定区间的子字符串。

实现过程

（1）自定义一个JavaScript脚本函数。该函数首先使用if…else条件判断语句和for循环语句判断文本域内输入的字符个数是否超过允许的最多字符个数，如果输入的字符个数超过允许的最多字符个数，则调用alert()方法弹出一个警告对话框，并立即退出循环；然后将已用字符数和剩余字符数返回给页面。其关键代码如下：

<SCRIPTlanguage=JavaScript>

<!-

var LastCount =0;

function CountStrByte(Message,Total,Used,Remain){//字节统计

var ByteCount =0;

var StrValue =Message.value;

var StrLength =Message.value.length;

var MaxValue =Total.value;

if(LastCount !=StrLength) {//在此判断，减少循环次数

for (i=0;i<StrLength;i++){

ByteCount = (StrValue.charCodeAt(i)<=256)? ByteCount+1 : ByteCount+2;

if (ByteCount>MaxValue) {

Message.value =StrValue.substring(0,i);

alert("评论内容最多不能超过"+MaxValue+" 个字节！\n注意：一个汉字为两字节。");

ByteCount = MaxValue;

break;

}

Used.value= ByteCount;

Remain.value=MaxValue-ByteCount;

LastCount =StrLength;

}

//-->

</SCRIPT>

（2）在<textarea>标记的onKeyDowns事件和onKeyUp事件中分别调用自定义JavaScript脚本函数CountStrByte()，其关键代码如下：

<textareaname="评论内容"cols="45"rows="5"id="评论内容" onKeyDown="CountStrByte(this.form.评论内容,this.form.total,this.form.used,this.form.remain);" onKeyUp="CountStrByte(this.form.评论内容,this.form.total,this.form.used,this.form.remain);></textarea><br/>

最多允许

个字节已用字节：

剩余字节：

举一反三

根据本实例，读者可以进行以下操作。

实现开发中介信息网站中的信息发布页面。

实现开发餐饮网站中的留言信息页面。

实例119 自动选择文本框/编辑框中的文字

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\04\119

实例说明

在一些实际应用中，经常要对大量的文字信息进行编辑。为了节省对文字编辑的时间或是引起用户的注意，可以自动选择编辑区域内的文字内容，方便用户进行替换、读取等操作。运行本实例，当单击文本框/编辑框（即当页面中的文本框/编辑框获得焦点）时，文本框/编辑框中的文字将自动全部选中。程序运行结果如图4.58所示。

图4.58 自动选择文本框/编辑框中的文字

技术要点

本实例主要应用JavaScript的document对象来设置文本框/编辑框的select()属性，select()属性用于选择文本框/编辑框中的所有文本。

实现过程

（1）实现自动选择文本框/编辑框中文字的自定义JavaScript函数，其关键代码如下：

function Myselect_txt(){

if (document.form1.title.focus){

document.form1.title.select();}

}

function Myselect_txtarea(){

if (document.form1.content.focus){

document.form1.content.select();}

}

</script>

（2）在页面中创建表格，在表格中创建表单以及表单元素，分别在<input>标记和<textarea>标记的onClick事件中调用自定义JavaScript函数，代码如下：

<tablewidth="443" height="97" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f9f9f9">

<formname="form1">

<td height="25" colspan="2"><div align="center"><font color="#FFFFFF">新闻信息修改</font></div></td>

</tr>

<tr>

</tr>

<tr>

<td rowspan="2"><textareaname="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea></td>

</tr>

<tr>

</tr>

<tr>

<divalign="center">

</div></td>

</tr>

</form>

</table>

举一反三

根据本实例，读者可以进行以下操作。

实现开发电子商务网站中的查看商品信息页面。

实现开发中介网站中的查看用户求职信息页面。

实例120 按下回车键时自动切换焦点

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\04\120

实例说明

在设计表单时，为了方便用户填写表单，可以设置按下回车键自动切换到下一个控件的焦点，而不是直接提交表单。运行本实例，当用户填写完一项信息后，按下回车键时将焦点自动切换到下一个文本框中。程序运行结果如图4.59所示。

图4.59 按下回车键时自动切换焦点

技术要点

本实例主要应用JavaScript的Event对象的keyCode只读属性。Event对象的确切属性依赖于发生的事件。下面给出Event对象的部分属性，如表4.8所示。

表4.8 Event对象的部分属性

实现过程

（1）在页面中创建表格，在表格中创建用户注册的表单以及表单元素，在各个<input>输入框的onKeyPress事件中调用自定义JavaScript函数Myenter()，代码如下：

<tablewidth="547" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

</tr>

<tr>

<formname="form1">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<tdheight="22"align="right">E-mail:</td>

</tr>

<tr>

</tr>

</form>

</table></td>

</tr>

<tr>

</tr>

</table>

（2）编写JavaScript自定义函数Myenter()，实现当按下回车键时将焦点自动切换到下一个文本框中。代码如下：

function Myenter(str){

if (event.keyCode==13){

str.focus();}

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发在线论坛的用户注册页面。

开发客房预订管理系统的用户信息登记页面。

实例121 获取下拉列表/菜单的值

本实例是一个如何获取控件值的程序

实例位置：光盘\mingrisoft\04\121

实例说明

在设计网页时，可以使用下拉列表/菜单提供多个选项，不仅为用户提供方便，程序人员还可以根据获取到的下拉列表/菜单值将用户提交的信息进行分类存储，保证对数据库信息的有效维护。运行本实例，单击“添加”按钮，在弹出的窗口中将显示用户在下拉列表中选择的选项名称。程序运行结果如图4.60所示。

图4.60 获取下拉列表/菜单的值

技术要点

本实例主要应用JavaScript的document对象获取下拉列表/菜单的值，并调用alert()方法弹出一个警告对话框，显示获取的信息内容。

实现过程

（1）在页面中创建表格，在表格中创建表单以及表单元素，并设置在提交表单时调用自定义函数Mycheck()，代码如下：

<tablewidth="788" height="360" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.jpg">

<tr>

</tr>

<tr>

<formname="form1" onSubmit="Mycheck()">

<tablewidth="560" height="142"border="0" cellpadding="-2" cellspacing="-2">

<tr>

</select>

</td>

</tr>

<tr>

</select></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

<tdcolspan="3"><inputname="build_name"type="text"id="build_name"style="background-color:#FFFFFF"></td>

</tr>

<tr>

</tr>

<tr>

<span class="redfont">（有图标<img src="light.gif" width="11" height="13">处是必添项）</span></td>

</tr>

</table>

</form></td>

</tr>

<tr>

</tr>

</table>

（2）编写JavaScript 自定义函数Mycheck ()，实现获取下拉列表/菜单的值。代码如下：

function Mycheck(){

var val1,val2,val3;

val1=document.form1.address.value;

val2=document.form1.class1.value;

val3=document.form1.huxing.value;

alert("获取下拉列表值:\n地段:"+val1+"\n房源类别:"+val2+"\n房源户型:"+val3);

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发旅游网站中的用户旅游申请页面。

开发在线考试系统中的考生登记页面。

实例122 遍历多选择下拉列表

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\04\122

实例说明

在使用下拉列表时，用户并不局限在只能选择一个选项，还可以在下拉列表中选择多个选项。运行本实例，用户可以按住Ctrl键，并使用鼠标单击所要选择的选项；或者按住Shift键，并使用鼠标选择所要选择的区段，实现在下拉列表中选择多个选项，选择的内容将显示在编辑框中。程序运行结果如图4.61所示。

图4.61 遍历多选择下拉列表

技术要点

本实例首先设置下拉列表的multiple属性，即允许用户选择多个选项，然后应用JavaScript脚本获取下拉列表的 length属性值（即选项个数）。在for 循环语句中判断 select元素对象的selected属性值，如果值为true（即此选项已被选中），则将此选项的value值赋给一指定变量，并将此变量值赋予页面中的编辑框。

实现过程

（1）为页面中的下拉列表设置multiple属性，并在下拉框的onChange事件中调用自定义的JavaScript函数updateorder()，其关键代码如下：

<formname="form1" method="post" action="">

<tablewidth="300"border="0"align="center" cellpadding="3"cellspacing="1"bgcolor="#FFCC00">

<tr>

<td height="22" align="left" background="images/bg.gif"bgcolor="#FFFFFF">可以进行多项选择的下拉列表:</td>

</tr>

<tr>

<option value="JavaScript程序设计">JavaScript程序设计</option>

<option value="JavaScript经典教程">JavaScript经典教程</option>

<option value="JavaScript范例宝典">JavaScript范例宝典</option>

<option value="JavaScript与CSS样式">JavaScript与CSS样式</option>

<option value="JavaScript与HTML">JavaScript与HTML</option>

</select></td>

</tr>

<tr>

<td height="22" align="left" background="images/bg.gif"bgcolor="#FFFFFF">显示所选内容:</td>

</tr>

<tr>

<tdalign="center"bgcolor="#FFFFFF"><textareaname="textarea"cols="40"rows="6"class="wenbenkuang"></textarea></td>

</tr>

</table>

</form>

（2）自定义的JavaScript脚本函数updateorder()的关键代码如下：

functionupdateorder()

{

var orderstring="";

var n=document.form1.mcusep.length;

for (i=0;i<n;++i)

{

if (document.form1.mcusep.options[i].selected)

{

orderstring+=document.form1.mcusep.options[i].value+"\n";

}

document.form1.textarea.value=orderstring;

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发企业商务系统中的企业信息添加页面。

编写动态网站中的友情链接管理页面。

实例123 在下拉列表中进行多选移除

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\04\123

实例说明

在开发动态网站程序时，经常会遇到将下拉列表中的选项进行多选移除或者多选移入。例如，在为员工分配工作地区时，为了避免工作冲突，分给员工A负责的地区就不可以再分给员工B了，同理，分给员工B负责的地区就不可以再分给员工A了。运行本实例，选择“任务地区1”下拉列表中的选项，并单击“>>”按钮，此选项将出现在“任务地区2”下拉列表中；选择“任务地区 2”下拉列表中的选项，并单击“<<”按钮，此选项将出现在“任务地区 1”下拉列表中。程序运行结果如图4.62所示。

图4.62 在下拉列表中进行多选移除

技术要点

本实例主要应用JavaScript的while循环语句，判断如果select元素的selectedIndex属性值不为-1，则获取在下拉列表中选中项的索引值和对应的文本，然后应用select元素对象的add()方法将此选项添加到另一个下拉列表中，并应用select元素对象的 remove()方法移除当前下拉列表中的此选项。

实现过程

（1）在页面中创建表单，在表单中分别添加两个下拉列表和普通按钮，在按钮的onClick事件中调用自定义的JavaScript脚本函数，代码如下：

<formname="form1" method="post" action="">

<tablewidth="380" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<tr>

</tr>

<tr>

<tdalign="center"bgcolor="#FFFFFF"><selectname="sel_place1"size="6" multipleclass="wenbenkuang"id="sel_place1"style="width:100px ">

<optionvalue="sel1">甘肃省</option>

<optionvalue="sel2">辽宁省</option>

<optionvalue="sel3">黑龙江省</option>

<optionvalue="sel4">吉林省</option>

<optionvalue="sel5">浙江省</option>

</select></td>

</tr>

</table></td>

<td width="80"align="center" valign="bottom"><input name="sure1" type="button" id="sure1"

onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);"value="<<">

<input name="sure2" type="button" id="sure2"onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);"value=">>"align="center"height="2"></td>

<tr>

</tr>

<tr>

<tdalign="center"bgcolor="#FFFFFF"><selectname="sel_place2"size="6" multipleclass="wenbenkuang"

id="sel_place2"style="width:100px ">

</select></td>

</tr>

</table></td>

</tr>

</table>

</form>

（2）自定义的JavaScript函数的关键代码如下：

function allsel(n1,n2)

{

while(n1.selectedIndex!=-1)

{

var indx=n1.selectedIndex;

var t=n1.options[indx].text;

n2.options.add(newOption(t));

n1.remove(indx);

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发员工管理系统中的员工管理权限页面。

开发电子商务网站中的商品销售渠道页面。

编写物流信息网中的货物运输方式页面。

实例124 将数组中的数据添加到下拉菜单中

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\04\124

实例说明

在开发动态网站时，可以将一些固定不变的数据存储在数组中，然后将数组中的数据显示到下拉菜单中以供用户选择，这样可以加快程序运行速度，方便用户浏览网页。运行本实例，单击下拉菜单的控制按钮，将显示出该下拉菜单中的全部选项。程序运行结果如图 4.63所示。

图4.63 将数组中的数据添加到下拉菜单中

技术要点

本实例主要应用JavaScript的构造函数Array()和构造函数Option()。下面分别进行介绍。

（1）使用构造函数Array()和运算符new可以创建Array数组对象，并且可以使用多种方式创建数组，创建数组可以有以下3种方法。

● 无参数调用。

语法格式如下：

var h =newArray();

● 指定数组前n 个元素的值。

语法格式如下：

var h =newArray(arglist);

其中，参数arglist是一个用逗号隔开的值表，这些值用于给Variant所包含的数组的各元素赋值。如果不提供参数，则创建一个长度为0的数组。

● 指定具有的元素个数。

语法格式如下：

var h =newArray(n);

其中，参数n是指定数组的长度。由于在JavaScript中，数组的第一个元素的下标值为0，所以n的值为数组的最大下标值加1。

（2）使用构造函数Option()可以动态地创建Option对象，语法如下：

newOption(text,value,defaultSelected,selected)

参数说明：

● text：表示一个字符串，指定Option 对象的text属性。

● value：表示一个字符串，指定Option 对象的value属性。

● defaultSelected：为布尔值，指定Option 对象的defaultSelected属性。

● selected：为布尔值，指定Option 对象的selected属性。

实现过程

（1）在<script>…</script>标记之间，首先定义一个数组，并为数组赋值，然后自定义一个JavaScript函数，将数组中的数据添加到表单的下拉菜单中，其关键代码如下：

var counts;

counts=0;

arr =newArray("JavaScript与ASP","JavaScript与JSP","JavaScript与ASP.NET","JavaScript与PHP");

counts=arr.length;

function Myselect(){

var i;

for (i=0;i <counts;i++) {

document.form1.sel.options[i]=newOption(arr[i],i);

}

</script>>

（2）在页面中创建表格，在表格中创建表单以及表单元素，在<select>标记的 onFocus事件中调用自定义的JavaScript函数Myselect()，代码如下：

<tablewidth="280" height="160" border="0" align="center" cellpadding="5" cellspacing="0">

<tr>

<td height="34" align="center" background="images/top_03.jpg"><span class="style1" style="font-weight:bold ">将数组中的数据添加到下拉菜单中</span></td>

</tr>

<tr>

<tablewidth="235" height="69"border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

</select></td>

</tr>

<tr>

</tr>

</table>

</form></td>

</tr>

</table>

举一反三

根据本实例，读者可以进行以下操作。

开发企业进销存管理系统中的商品分类信息页面。

开发客户关系管理系统中的客户管理页面。

实例125 应用下拉菜单选择所要联机的网站

本实例是一个应用广泛的程序

实例位置：光盘\mingrisoft\04\125

实例说明

在进行网站程序设计时，大多数网站都设有“友情链接”这一模块，通常情况下，链接的网站全部显示在页面中，浏览者可通过单击网站名称或地址的超级链接进入所要访问的网站。有时为了节约页面也可以通过下拉菜单的方法来实现该功能。运行本实例，当用户选择下拉菜单中所要联机的网站后（如图4.64所示），单击“GO！”按钮可以立即链接到指定的网站。此实例还附加是否以“新窗口访问”选项，浏览者可根据需要确定是否选择。

图4.64 应用下拉菜单选择所要联机的网站

技术要点

本实例将下拉菜单中各选项的 value属性设置为对应联机网站的网址，并在自定义的 JavaScript函数goURL()中获取用户选择的下拉列表选项值，然后使用window对象的location属性指定链接的URL地址。

实现过程

（1）自定义一个 JavaScript 函数，该函数首先判断用户是否选择在“新窗口访问”，如果勾选此项，则使用window 对象的 open()方法打开一个新窗口浏览页面，否则在本窗口中打开新页面，其关键代码如下：

<!-

functiongoURL(){

var thebox=document.form1

if(thebox.fig.checked){

if(!window.newwindow){

newwindow=window.open("")

newwindow.location=

thebox.example.options[thebox.example.selectedIndex].value

}

else

window.location=

thebox.example.options[thebox.example.selectedIndex].value

}

//-->

</script>

（2）在页面中创建表单以及表单元素，并在<input>标记的 onClick 事件中调用自定义JavaScript函数goURL()，代码如下：

<formname="form1">

<span class="style1">新窗口访问</span><br>

<optionvalue="http://www.mingrisoft.com">明日</option>

<optionvalue="http://www.mingrisoft.com">明日新闻</option>

<optionvalue="http://www.mingrisoft.com">明日科技</option>

</select>

</form>

举一反三

根据本实例，读者可以进行以下操作。

在动态网站中应用本实例实现网站导航。

开发图书管理系统中按图书分类搜索图书的页面。

实例126 多级级联菜单

本实例是一个提高工作效率的程序

实例位置：光盘\mingrisoft\04\126

实例说明

在实际应用中，经常将事物进行分类，分类可以有二级或者多级。在设计页面时，可以使用多个下拉菜单分别显示不同级别的分类信息，即实现多级级联菜单。运行本实例，当选择商品的“第一级分类”下拉菜单时，商品的“第二级分类”下拉菜单的内容会随即发生变化。程序运行结果如图4.65所示。

图4.65 多级级联菜单

技术要点

本实例首先在<script>标记中定义两个数组，分别用于记录商品一级分类和二级分类的信息，然后自定义一个 JavaScript 函数，该函数的功能是当触发商品“第一级分类”下拉菜单中的 onChange 事件时，先清空商品的“第二级分类”下拉菜单中的选项内容，然后再将对应信息装载到商品的“第二级分类”下拉菜单中。

实现过程

（1）在页面中创建表单，在表单中创建一个“类别”下拉菜单和一个“分类”下拉菜单，在“类别”下拉菜单的onChange事件中调用自定义的JavaScript脚本函数，关键代码如下：

</select>

</select>

（2）编写JavaScript代码，实现多级级联菜单的功能。关键代码如下：

var arr2 =newArray(4);

arr2["数码设备"]=newArray("数码相机","打印机");

arr2["家用电器"]=newArray("电视机","电冰箱");

arr2["礼品工艺"]=newArray("鲜花","彩带");

functionremoveinfo(classMenu){//将下拉框各选项清空

for(var i=0; i<classMenu.options.length;i++){

classMenu.options[i]=null;

}

function changeMenu(classList,classMenu){

removeinfo(classMenu)

for(var i=0; i<classList.length;i++){

classMenu[i]=newOption(classList[i],classList[i]);

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发中介信息网站的房屋求购页面。

开发简历信息网中的个人简历添加页面。

实例127 可以输入文字的下拉菜单

本实例是一个技巧性较强的程序

实例位置：光盘\mingrisoft\04\127

实例说明

网页中下拉菜单的选项是固定的，这样就存在一些弊端，如果用户想选择的项目不在下拉菜单的所列选项中，该怎么办呢？如果能在下拉菜单中输入文字，这个问题就解决了。运行本实例，在“等级名称”下拉菜单中，只包含了“新进成员”、“游侠”、“斑竹”3个选项，如果要添加的用户是上面 3 个选项以外的等级，就可以在下拉菜单中直接输入等级名称。程序运行结果如图4.66所示。

图4.66 可以输入文字的下拉菜单

技术要点

由于下拉菜单的选项是固定的，所以要实现在下拉菜单中输入文字，首先需要捕获用户的键盘事件，然后根据键盘输入的数据动态添加下拉菜单的选项，同时还需要判断用户按下的是退格键还是空格键，如果是退格键，则需要从已经添加的文字中删除一个文字，如果是空格键，则需要在已经添加的文字后面添加一个空格字符。

本实例主要应用JavaScript来设置元素的innerText属性、应用String对象的fromCharCode()方法以及select元素对象option 数组的remove()方法。下面分别进行介绍。

● innerText属性：用于修改起始标记与结束标记之间的文本。

● fromCharCode方法：返回指定数值对应的字符，即将数值转换为字符。

● remove方法：删除option 数组中对应的选项。

实现过程

（1）在页面中添加“等级名称”下拉菜单，其中包括“新进成员”、“游侠”、“斑竹”3个选项，代码如下：

</select>

（2）在<select>标记的onkeypress事件中调用自定义的JavaScript函数add_opt(opt)，用于在下拉菜单中添加新的选项，并设置该选项为选中状态，代码如下：

function add_opt(opt){

//opt表示现有可选项的数目

form1.sel_grand.options[opt]=newOption(ok=(form1.sel_grand.options[opt])?

form1.sel_grand.options[opt].innerText+String.fromCharCode(event.keyCode):

String.fromCharCode(event.keyCode),ok)

form1.sel_grand.selectedIndex=opt;

}

</script>

（3）在<select>标记的onkeyup事件中调用自定义的JavaScript函数edit_opt(opt)，用于处理当用户按下退格键时，将已经写到下拉菜单中的文字删除，当用户按下空格键时，在下拉菜单中添加一个空格符号，代码如下：

function edit_opt(opt){

//opt表示现有可选项的数目

if(form1.sel_grand.options[opt]){

if(event.keyCode==8){

var str=form1.sel_grand.options[opt].innerText;

var len=str.length;

form1.sel_grand.options[opt].innerText=str.substring(0,len-1);

if(form1.sel_grand.options[opt].innerText==""){

form1.sel_grand.remove(opt);

form1.bsel_grandranch.selectedIndex=1;

};

}

if(event.keyCode==32){

form1.sel_grand.options[opt].innerText+="";

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发企业进销存管理系统中的商品添加页面。

编写动态网站中的在线信息收集页面。

实例128 根据下拉菜单的值显示不同控件

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\04\128

实例说明

在开发Web应用程序时，经常涉及多条件查询的问题。为了方便用户，可以根据用户在下拉菜单中选择的条件，显示不同的控件。运行本实例，在“统计类型”下拉菜单中选择“按月统计”时，在下方将显示关于月份的复选框，如图4.67所示。在选择“按年统计”时，在下方则显示关于年份的单选框，如图4.68所示。

图4.67 选择“按月统计”

图4.68 选择“按年统计”

技术要点

本实例主要通过JavaScript的document对象设置表格元素的display属性，来实现控件的隐藏或者显示。当display属性值为none时，表示元素隐藏，display属性值为block时，表示元素显示。

实现过程

（1）根据下拉菜单的值显示不同控件的自定义JavaScript脚本函数代码如下：

function changeMenu(Menutext){

if(Menutext =="按月统计"){

document.all.NumID.style.display="block";

document.all.DateID.style.display="none";

}

if(Menutext =="按年统计"){

document.all.DateID.style.display="block";

document.all.NumID.style.display="none";

}

</script>

（2）在<select>标记的onChange事件中调用JavaScript脚本函数changeMenu(Menutext)，并设置控件在默认状态下是不可见的，代码如下：

<option selected>选择统计类型</option>

<optionvalue="1">按月统计</option>

<optionvalue="2">按年统计</option>

</select>

<tralign="left"bgcolor="#E3E3E3"id="NumID"style="display:none">

…略

<tralign="left"bgcolor="#E3E3E3"id="DateID" style="display:none">

…略

举一反三

根据本实例，读者可以进行以下操作。

开发校友录网站中的班级查看页面。

开发企业门户网站中的站内信息添加页面。

实例129 选中单选按钮后显示其他表单元素

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\04\129

实例说明

在设计网站新闻信息添加页面时，根据选择的信息类型的不同，需要显示不同的表单元素。运行本实例，选中“站内公告”单选按钮时，其下方显示“信息主题”文本框和“信息内容”编辑框，如图4.69所示，选中“商业资讯”单选按钮时，其下方将增添一个“图片名称”文本框，如图4.70所示。

图4.69 选中“站内公告”单选按钮

图4.70 选中“商业资讯”单选按钮

技术要点

本实例主要应用JavaScript来设置表格行的display样式，以实现表格行的显示和隐藏。通过设置表格行的 id属性，可实现对表格行的整体控制。通过将表格行的 display 样式设置为“none”，可以控制表格行的隐藏。将表格行的display样式设置为“block”，可以显示表格行。

实现过程

首先在页面中创建表格，设置表格行的id属性值，并设置其在默认状态下是不可见的。然后创建表单以及表单元素，并设置在选中“站内公告”单选按钮时，触发其 onClick 事件，使“图片名称”文本框不可见；在选择“商业资讯”单选按钮时，触发其 onClick 事件，使“图片名称”文本框可见。代码如下：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>选中单选按钮后显示其他表单元素</title>

<styletype="text/css">

<!-

.style1 {color:#FFFFFF}

.wenbenkuang {

font-family:"宋体";

font-size: 9pt;

color:#333333;

border: 1px solid #999999;

}

-->

</style>

</head>

<bodystyle="font-size:12px">

<tablewidth="360" border="0" align="center" cellpadding="2" cellspacing="1"bgcolor="#6699CC">

<formname="form1">

<td height="28" colspan="2" align="center"><span class="style1" style="font-weight:bold">网站新闻信息添加</span></td>

</tr>

站内公告

商业资讯</td>

</tr>

</tr>

</tr>

</tr>

</tr>

</form>

</table>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

开发动态网站管理员级别设置页面。

开发中介信息网站中的多条件信息搜索页面。

实例130 通过单选按钮控制其他表单元素是否可用

本实例是一个人性化的程序

实例位置：光盘\mingrisoft\04\130

实例说明

在开发动态网站时，根据用户选择的选项不同，可以设置表单中的元素是否可用，以保证提交信息的准确性。运行本实例，选中“普通主题”单选按钮时，用户可以使用“主题分类”下拉列表，如图 4.71 所示。选中“版面公告”单选按钮时，“主题分类”下拉列表呈现灰色状态，即在发表版面公告时不允许选择主题分类，如图4.72所示。

图4.71 选中“普通主题”单选按钮

图4.72 选中“版面公告”单选按钮

技术要点

本实例主要应用JavaScript来设置下拉列表的disabled属性。当元素的disabled属性为true时表示该元素不可用，控件元素呈现灰色状态。

实现过程

（1）设置下拉列表的id属性，并设置下拉列表在默认情况下是可用的。

</select>

（2）当选中“普通主题”单选按钮时，触发其onClick事件，刷新本页面。

（3）当选中“版面公告”单选按钮时，触发其onClick事件，设置下拉列表的disabled属性值为true。

举一反三

根据本实例，读者可以进行以下操作。

开发企业员工信息管理系统中的员工职称信息页面。

开发物业管理系统中的管理员权限页面。

实例131 不提交表单获取复选框的值

本实例是一个如何获取控件值的程序

实例位置：光盘\mingrisoft\04\131

实例说明

在制作网页时，在不提交表单的情况下也可以获取到复选框的值。运行本实例，选择复选框后，在“处理信息显示”文本框内单击鼠标使文本框获得焦点，将即时显示用户选中的复选框值。程序运行结果如图4.73所示。

图4.73 不提交表单获取复选框的值

技术要点

本实例主要应用JavaScript的for循环语句来判断复选框的checked属性值，如果checked属性值为true（即说明复选框已被选中），则记录复选框值，并将所有选中的复选框值赋给“处理信息显示”文本框。

实现过程

（1）自定义一个JavaScript函数，该函数使用for循环语句，将选中的复选框值赋给变量，并将变量值赋给文本框，其关键代码如下：

function Mycheck(){

var str="";

for (var i=0; i <document.form1.chk_type.length; i++){

if (document.form1.chk_type[i].checked){

str+=document.form1.chk_type[i].value;

}

document.form1.txt_info.value=str;

}

</script>

（2）在页面中创建表单和表单元素，并在“处理信息显示”文本框的onFocus事件中调用JavaScript脚本函数Mycheck()，代码如下：

<formname="form1">

<tablewidth="322"border="0"align="center" cellpadding="0"cellspacing="1"bgcolor="#7D84F9">

<tr>

</tr>

<td width="98" height="28" align="center">订单处理项:</td>

已收款

已发货

已确认</td>

</tr>

<td height="28" align="center">处理信息显示:</td>

</tr>

</table>

</form>

举一反三

根据本实例，读者可以进行以下操作。

开发办公自动化管理系统中的管理员信息添加页面。

开发在线投票页面。

实例132 控制复选框的全选或反选

本实例是一个应用较为广泛的程序

实例位置：光盘\mingrisoft\04\132

实例说明

在查看数据信息时，经常需要对多条数据进行操作。例如，删除数据时，通过控制复选框的全选或反选，可以批量删除数据等。运行本实例，选中“[全选/反选]”复选框，表单中所有的复选框都将处于选中状态，如图4.74所示。

图4.74 控制复选框的全选或反选

技术要点

本实例应用自定义JavaScript函数，首先判断表单中包含复选框的数量，如果数量大于0，则使用for循环语句设置所有复选框的checked属性值为true，如果“[全选/反选]”复选框处于未选中状态，则设置所有复选框的checked属性值为false。

实现过程

（1）在页面中创建表单，在表单中创建 5 个复选框，在“全选/反选”复选框的 onClick事件中调用自定义的JavaScript脚本函数，代码如下：

<formname="form1">

<tablewidth="500"border="0"align="center" cellpadding="0"cellspacing="1"bgcolor="#60A2EA">

<td height="22" colspan="5" align="left">商品信息查看</td>

</tr>

</tr>

<td height="22">P_L音乐手机</td>

</tr>

</tr>

<td height="22">CXO音响 </td>

</tr>

</tr>

[全选/反选]</td>

</tr>

</table>

</form>

（2）编写JavaScript代码，定义CheckAll()函数，实现控制复选框的全选或反选。关键代码如下：

function CheckAll(elementsA,elementsB)

{

var len = elementsA;

if(len.length >0)

{

for(i=0;i<len.length;i++)

{

elementsA[i].checked =true;

}

if(elementsB.checked ==false)

{

for(j=0;j<len.length;j++)

{

elementsA[j].checked =false;

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发新闻信息网站中的信息查看页面。

开发博客网站中的文章评论查看页面。

实例133 只有一个复选框时控制复选框的全选或反选

本实例是一个提高操作技能的程序

实例位置：光盘\mingrisoft\04\133

实例说明

在网页中，如果显示的信息数量只有一条，即只有一个需要控制的复选框时，使用上一实例的 JavaScript 函数控制复选框的全选或反选就会出现错误了。本实例将实现只有一个复选框时控制复选框的全选或反选的功能。程序运行结果如图4.75所示。

图4.75 只有一个复选框时控制复选框的全选或反选

技术要点

本实例主要通过JavaScript的 if条件判断语句确定复选框的数量是否大于0，如果数值不大于0，说明需要控制的复选框只有一个（即返回的length属性值为null），则可以直接设置复选框的checked属性值为true或者false。

实现过程

（1）在页面中创建表单，在表单中创建两个复选框，在“全选/反选”复选框的 onClick事件中调用JavaScript自定义函数，代码如下：

<formname="form1">

<tablewidth="500"border="0"align="center" cellpadding="0"cellspacing="1"bgcolor="#60A2EA">

<td height="22" colspan="5" align="left">文章信息查看</td>

</tr>

</tr>

<td height="22">future</td>

<td height="22">掌握自己的路标</td>

</tr>

[全选/反选]</td>

</tr>

</table>

</form>

（2）编写JavaScript代码，定义CheckAll()函数，实现只有一个复选框时控制复选框的全选或反选。关键代码如下：

function CheckAll(elementsA,elementsB)

{

var len = elementsA;

if(len.length >0) {}

else

{

len.checked =true;

if(elementsB.checked ==false)

{

len.checked =false;

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发网络考试系统中的试题查看页面。

开发在线美食网站后台管理系统中的美食查看页面。

实例134 通过JavaScript控制表单的提交与重置

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\04\134

实例说明

用户填写表单时，可以单击“提交”按钮提交表单，也可以直接按回车键提交表单，同时还可以单击“重置”按钮将所填内容清空。为了防止用户因疏忽而按错键，可以使用JavaScript来控制表单的提交与重置。程序运行结果如图4.76所示。

图4.76 通过JavaScript 控制表单的提交与重置

技术要点

本实例主要是通过JavaScript来调用表单的submit()提交方法和reset()重置方法。页面中的按钮为普通按钮，即<input>标记的类型为button。

实现过程

在页面中创建表格，在表格中创建表单以及表单元素，在“添加”按钮的 onClick 事件中调用表单的submit()方法对表单进行提交，在“重置”按钮的onClick事件中调用表单的reset()方法对表单进行重置。代码如下：

<tablewidth="552" height="193" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.jpg">

<tr>

<br>

       相册上传<br>

<br>

<tablewidth="500" border="0" align="center" cellpadding="0" cellspacing="1">

<formname="form1">

<tr>

</select></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</form>

</table></td>

</tr>

</table>

举一反三

根据本实例，读者可以进行以下操作。

开发宽带点播网站中的音频和影视文件上传页面。

开发供求信息网站中的信息添加页面。

实例135 防止表单重复提交

本实例是一个提高操作安全性的程序

实例位置：光盘\mingrisoft\04\135

实例说明

用户在提交表单时，如果单击提交按钮后，表单没有立即提交，用户则会多次单击提交按钮，即可能会多次提交表单内容，这样会造成意想不到的后果，使应用程序无法运行。运行本实例，当用户单击“确定”按钮后，提交表单的同时该按钮将被禁用，防止表单重复提交。程序运行结果如图4.77所示。

图4.77 防止表单重复提交

技术要点

本实例首先设置<input>标记的 disabled属性值，然后再调用表单的 submit()方法。页面中的按钮为普通按钮，即<input>标记的类型为button。

实现过程

在页面中创建表格，在表格中创建表单以及表单元素，在“确定”按钮的 onClick 事件中设置该<input>标记的disabled属性值为true，并调用表单的submit()方法对表单进行提交。具体代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>防止表单重复提交</title>

<style>

.wenbenkuang {

font-family:"宋体";

font-size: 9pt;

color:#333333;

border: 1px solid #999999;

}

</style>

</head>

<bodystyle="font-size:12px">

<tablewidth="360" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td height="28">加盟商存款信息</td>

</tr>

<tr>

</tr>

<tr>

<tablewidth="95%" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#D1781C">

<formname="form1"action="test.html">

<tr>

<td width="123"height="22" align="right" bgcolor="#FFFFFF">加盟商编号:</td>

</tr>

<tr>

元</td>

</tr>

<tr>

</tr>

</form>

</table></td></tr>

</table>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

开发电子商务网站中的商品入库信息页面。

开发客户关系管理系统中的客户签订合同页面。

实例136 通过for循环获取表单元素的中文名称

本实例是一个提高基础技能的程序

实例位置：光盘\mingrisoft\04\136

实例说明

当页面中包含很多表单元素时，可以使用JavaScript脚本在for循环语句内获取表单元素的中文名称，并验证表单控件元素是否为空值。运行本实例，当用户提交表单时，如果表单中控件元素值为空字符串，则会弹出警告提示框。程序运行结果如图4.78所示。

图4.78 通过for 循环获取表单元素的中文名称

技术要点

本实例主要是通过JavaScript的document对象来获取表单控件元素数组elements[]的值，并应用for循环语句以及if条件语句来判断各表单控件元素的值是否为空，如果为空将弹出带中文提示信息的对话框。

实现过程

（1）在页面中添加表单，并设置文本框对应的name属性值和title属性值，代码如下：

<formname="form1">

<tr align="left" bgcolor="#FFFFFF"><td height="22" align="left">加盟商应收退款是否对账:</td>

<td height="22"><input name="txt_fig" type="radio" value="1" checked>是

</form>

（2）自定义的JavaScript函数Mycheck(form)的关键代码如下：

function Mycheck(form){

for(i=0;i<form.length;i++){

if(form.elements[i].value==""){

alert(form.elements[i].title+"不能为空!");return false;}

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发物流信息网站中的货物详细信息页面。

开发游戏网站中的软件下载页面。

实例137 可以提交到不同处理页的表单

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\04\137

实例说明

在实际应用中，经常会遇到根据用户填写内容的不同，将表单提交到不同的处理页。运行本实例，根据在“提交页面”文本框中输入的页面名称，将表单提交到相应的处理页。程序运行结果如图4.79所示。

图4.79 可以提交到不同处理页的表单

技术要点

本实例主要通过JavaScript来设置表单的action属性（确定提交到的处理页面），然后调用表单的submit()方法（表示执行提交表单的命令）。

实现过程

（1）在页面中创建表单和表单元素，并在“确定”按钮的 onClick 事件中调用JavaScript自定义函数Mycheck()，代码如下：

<formname="form1">

<tablewidth="300"border="0"align="center" cellpadding="1"cellspacing="0"class="table">

<tr>

<tdheight="37"colspan="2"background="images/bg.jpg">      用户资料填写</td>

</tr>

<tr>

<tdwidth="389"height="22"align="left"> 　　<inputname="textfield" type="text"class="wenbenkuang"></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

<tdheight="22"align="left"> 　　<inputname="txt_action" type="text"class="wenbenkuang" id="txt_action">

(请事先创建提交页面,否则将显示错误信息)</td>

</tr>

<tr>

</tr>

</table>

</form>

（2）编写JavaScript代码，定义Mycheck()函数，使表单可以提交到不同的处理页。关键代码如下：

function Mycheck(){

var txt=document.form1.txt_action.value;

document.form1.action=txt;

document.form1.submit();

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

开发根据文件类别上传文件的页面。

开发在线论坛中的用户等级设置页面。