JAVA初中级备课完美版-CSS样式特效与表单验证课件

CSS样式特效与表单验证第四章CSS样式特效与表单验证第四章回顾详述getElementById()的主要功能详述getElementsByName()的主要功能简述制作浮动广告图片的实现思路简述制作全选/反选多个复选框的实现思路回顾详述getElementById()的主要功能本章目标会使用style样式属性动态改变边框颜色会使用className类名属性动态改变按钮背景图片会使用表单事件和脚本函数实现表单验证会使用String对象和文本框控件常用属性和方法实现客户端验证本章目标会使用style样式属性动态改变边框颜色回顾已学的CSS样式表-1样式规则的语法是什么？用法有哪些？行内样式内嵌样式外部样式表回顾已学的CSS样式表-1样式规则的语法是什么？用法有哪些？回顾已学的CSS样式表-2-1回顾HTML中讲过的CSS样式表，常见的样式有哪些？常见样式文本属性样式背景属性样式不带下划线的超连接样式细边框样式图片按钮样式回顾已学的CSS样式表-2-1回顾HTML中讲过的CSS样式回顾已学的CSS样式表-2-2文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复回顾已学的CSS样式表-2-2文本属性说明font-siz回顾已学的CSS样式表-2-3名称说明不带下划线的超连接A{color:blue;text-decoration:none;}A:hover{color:red;}细边框样式.boxBorder{border-width:1px;border-style:solid;}图片按钮样式.picButton{background-image:url(images/back2.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;}回顾已学的CSS样式表-2-3名称说明不带下划线的超连接A回顾已学的CSS样式表-3制作如下图所示的“回顾样式.html”的页面效果细边框样式图片按钮样式超链接样式回顾已学的CSS样式表-3制作如下图所示的“回顾样式.htm制作改变字体大小的样式特效实现思路1、创建改变样式的JavaScript代码

this.style.fontSize='24px'this.style.fontSize='14px‘2、利用鼠标相关事件调用JavaScript代码

onMouseOver="this.style.fontSize='24px'“onMouseOut="this.style.fontSize='14px'"使用了style属性样式表：font-size脚本代码：fontSize制作改变字体大小的样式特效实现思路使用了style属性样式课堂练习请编写如下图所示，实现随鼠标移入改变边框色的效果练习代码练习答案鼠标移入边框颜色变为红色课堂练习请编写如下图所示，实现随鼠标移入改变边框色的效果练习制作改变按钮背景图片的特效-1如何实现如下图所示，按钮的图片背景效果？鼠标移入按钮背景变色制作改变按钮背景图片的特效-1如何实现如下图所示，按钮的图制作改变按钮背景图片的特效-2演示示例8：改变样式backgroundImage演示演示：通过改变样式backImage能否实现？onMouseOver="this.style.backgroundImage='url(images/back2.jpg)';"失败的原因：当鼠标移到按钮上方时，除了图片要换以外，还应保留border、margin、padding等样式。即使用多行代码onmouseOver="this.style.backImage=‘url(images/back2.jpg)';this.style.boder=0;this.style.padding=0......";解决办法：创建mouseOver和mouseOut两种类样式，然后使用className类属性进行切换制作改变按钮背景图片的特效-2演示示例8：改变样式backg制作改变按钮背景图片的特效-3<STYLEtype="text/css">.mouseOverStyle{background-image:url(images/back2.jpg);color:#CC0099;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px; }.mouseOutStyle{background-image:url(images/back1.jpg);color:#0000FF;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px; }</STYLE>定义样式制作改变按钮背景图片的特效-3<STYLEtype="te制作改变按钮背景图片的特效-4<TR><TDheight="30"colSpan=2align=center><INPUTname=Buttontype="button"class="mouseOutStyle"value="登录"onMouseOver="this.className='mouseOverStyle'"onMouseOut="this.className='mouseOutStyle'"></TD></TR>……利用鼠标相关事件调用样式代码使用className应用类样式制作改变按钮背景图片的特效-4<TR>利用鼠标相关事件调用层的显示/隐藏特效显示属性display参数值描述block默认值。按块显示，换行显示.用该值为对象之后添加新行none不显示，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。inline按行显示，和其他元素同一行显示。显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏层的显示/隐藏特效显示属性display参数值描述block课堂练习编写如下图所示，层的显示隐藏特效使用函数的参数，传递超链接的内容修改按钮值：document.myform.placeButton.value=place课堂练习编写如下图所示，层的显示隐藏特效使用函数的参数，传递表单验证服务器IE脚本在客户端执行，减轻服务器端的压力客户端用户输入客户端用户输入……客户端用户输入……发送请求返回响应发送请求返回响应发送请求返回响应表单验证服务器IE脚本在客户端执行，减轻服务器端的压力客户端表单验证的内容-1不能为空且不能有数字不能为空且不能有数字不能为空，且只能包括字母、数字和下划线字符密码不能为空并且最少为6位，还要求两次输入的密码要一致表单验证的内容-1不能为空且不能有数字不能为空且不能有数字不表单验证的内容-2不能为空且包含字符@和.只能二选一年月日不能为空，且不能超出其要求的范围表单验证的内容-2不能为空且包含字符@和.只能二选一年月日不表单验证的思路-1如何编写脚本验证表单？1、获取表单元素的值（String类型），然后进行判断2、触发表单（FORM）的提交事件（onSubmit）表单验证的思路-1如何编写脚本验证表单？1、获表单验证的思路-2常用的String对象使用var语句

varnewstr="这是我的字符串"创建String对象

varnewstr=newString("这是我的字符串“)调用方法和属性字符串对象.属性名字符串对象.方法名()表单验证的思路-2常用的String对象表单验证的思路-3名称说明属性length获取字符串字符的个数方法indexOf(“子字符串”，起始位置)

查找子字符串的位置charAt(index)获取位于指定索引位置的字符substring(index1,index2)求子串toLowerCase()将字符串转换成小写toUpperCase()将字符串转换成大写String对象常用的属性和方法语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回－1例如：varxvary=“abcdefg”;x=y.indexOf(“c”,0);//返回结果为2，起始位置是0表单验证的思路-3名称说明属性length获取字符串字符表单验证的思路-4查看完整代码检查电子邮件email是否包含“@”和”.”<SCRIPTLANGUAGE="JavaScript">functioncheckEmail(){varstrEmail=document.myform.txtEmail.value;if(strEmail.length==0){alert("电子邮件不能为空!");returnfalse;}if(strEmail.indexOf("@",0)==-1){alert("电子邮件格式不正确\n必须包含@符号！");returnfalse;}if(strEmail.indexOf(".",0)==-1){alert("电子邮件格式不正确\n必须包含.符号！");returnfalse;}returntrue;}</SCRIPT>……<FORMname=“myform”method=“post”action=“reg_success.htm”onSubmit=“returncheckEmail()”>……<INPUTname="registerButton"type="submit"id="registerButton"value="注册">……返回结果-1表示没找到“@”字符获取表单元素的值表单的提交事件表单验证的思路-4查看完整代码检查电子邮件email<SCR文本框控件-1如何实现如下图所示，完善电子邮件的例子。用户单击时,邮箱的提示信息自动清除提示电子邮件格式不对输入的信息自动被选中并高亮显示文本框控件-1如何实现如下图所示，完善电子邮件的例子。用户单文本框控件-2文本框对象的常用属性、方法、事件使用文本框对象的相关方法，实现选中效果名称说明属性value设置或获取文本框的值方法focus()获得焦点select()选中文本内容，突出显示输入区域事件onFocus光标进入某个文本框脚本运行onBlur文本框失去焦点脚本运行onKeyPress当一个键按下并释放时去触发一个事件文本框控件-2文本框对象的常用属性、方法、事件使用文本框对象文本框控件-3<SCRIPTLANGUAGE="JavaScript">….functionclearText(){if(document.myform.txtEmail.value==“请输入真实的电子邮箱，我们将发送激活密码"){document.myform.txtEmail.value="";document.myform.txtEmail.style.color="red"; } }</SCRIPT>……<TDcolspan="2"><INPUTname="txtEmail"type="text"class="textBorder"id="txtEmail"value="请输入真实的电子邮箱，我们将发送激活密码"size="40"onFocus="clearText()"style="color:#666666;">*必填</TD>……清空文本框的内容修改文本框的颜色文本框获得焦点就调用方法clearText()文本框控件-3<SCRIPTLANGUAGE="Jav常见错误-1<SCRIPTlanguage="javascript">functionvalidateform(){ if(sNameCheck()&&passCheck()&&bdaycheck()) ret