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

1、CSS样式特效与表单验证样式特效与表单验证第四章第四章回顾回顾详述详述getElementById()的主要功能的主要功能详述详述getElementsByName()的主要功能的主要功能简述制作浮动广告图片的实现思路简述制作浮动广告图片的实现思路简述制作全选简述制作全选/反选多个复选框的实现思路反选多个复选框的实现思路本章目标本章目标会使用会使用style样式属性动态改变边框颜色样式属性动态改变边框颜色会使用会使用className类名属性动态改变按钮背景图片类名属性动态改变按钮背景图片会使用表单事件和脚本函数实现表单验证会使用表单事件和脚本函数实现表单验证会使用会使用String对象和文本

2、框控件常用属性和方法实现客户对象和文本框控件常用属性和方法实现客户端验证端验证回顾已学的回顾已学的CSS样式表样式表-1样式规则的语法是什么？用法有哪些？样式规则的语法是什么？用法有哪些？行内样式行内样式内嵌样式内嵌样式外部样式表外部样式表回顾已学的回顾已学的CSS样式表样式表-2-1回顾回顾HTML中讲过的中讲过的CSS样式表，常见的样式有哪些？样式表，常见的样式有哪些？常见常见样式样式文本属文本属性样式性样式背景属背景属性样式性样式不带下划不带下划线的超连线的超连接样式接样式细边细边框样式框样式图片按图片按钮样式钮样式回顾已学的回顾已学的CSS样式表样式表-2-2文本属性文本属性说说 明明

3、font-size字体大小字体大小font-family字体类型字体类型font-style字体样式字体样式color设置或检索文本的颜色设置或检索文本的颜色text-align文本对齐文本对齐背景属性背景属性说说 明明background-color设置背景颜色设置背景颜色background-image设置背景图像设置背景图像background-repeat设置一个指定的图像如何被重复设置一个指定的图像如何被重复回顾已学的回顾已学的CSS样式表样式表-2-3名称名称说说 明明不带下划线的超连接不带下划线的超连接A color:blue;text-decoration:none;A:hov

4、er color:red;细边框样式细边框样式.boxBorder border-width:1px;border-style:solid;图片按钮样式图片按钮样式.picButtonbackground-image:url(images/back2.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;回顾已学的回顾已学的CSS样式表样式表-3制作如下图所示的制作如下图所示的“回顾样式回顾样式.html”的页面效的页面效果果细边框细边框样式样式图片按图片按钮样式钮样式超链接超链接样式样式制作改

5、变字体大小的样式特效制作改变字体大小的样式特效 实现思路实现思路 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课堂练习课堂练习请编写如下图所示，实现随鼠标移入改

6、变边框色的效果请编写如下图所示，实现随鼠标移入改变边框色的效果练习代码练习代码练习答案练习答案鼠标移入边框鼠标移入边框颜色变为红色颜色变为红色制作改变按钮背景图片的特效制作改变按钮背景图片的特效-1如何实现如下图所示如何实现如下图所示，按钮的图片背景效果？，按钮的图片背景效果？鼠标移入按鼠标移入按钮背景变色钮背景变色制作改变按钮背景图片的特效制作改变按钮背景图片的特效-2演示示例演示示例8 8：改变样式改变样式backgroundImagebackgroundImage演示演示演示：通过改变样式演示：通过改变样式backImage能否实现？能否实现？onMouseOver=this.style

7、.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两种类样式，两种类样式，然后使用然后使用classNam

8、e类属性进行切换类属性进行切换制作改变按钮背景图片的特效制作改变按钮背景图片的特效-3.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;wi

9、dth:82px;font-size:14px;定义样式定义样式制作改变按钮背景图片的特效制作改变按钮背景图片的特效-4 利用鼠标相关事件调用样式代码利用鼠标相关事件调用样式代码使用使用className应应用类样式用类样式层的显示层的显示/隐藏特效隐藏特效显示属性显示属性display参数值参数值描述描述block默认值。按块显示，换行显示默认值。按块显示，换行显示.用该值为对象之后添加新行用该值为对象之后添加新行none不显示不显示，隐藏对象。与，隐藏对象。与visibility属性的属性的hidden值不值不同，其不为被隐藏对象保留其物理空间。同，其不为被隐藏对象保留其物理空间。inli

10、ne按行显示，和其他元素同一行显示。按行显示，和其他元素同一行显示。显示属性显示属性display适用于所有适用于所有HTML标签，常用于层标签，常用于层DIV、图片图片Img的显示和隐藏的显示和隐藏课堂练习课堂练习编写如下图所示，层的显示隐藏特效编写如下图所示，层的显示隐藏特效使用函数的参使用函数的参数，传递超链数，传递超链接的内容接的内容修改按钮值：修改按钮值：document.myform.placeButton.value=place表单验证表单验证服务器IE脚本在客户端执行，减轻服务器端的压力脚本在客户端执行，减轻服务器端的压力客户端客户端用户输入用户输入客户端客户端用户输入用户输入

11、客户端客户端用户输入用户输入发送请求发送请求返回响应返回响应发送请求发送请求返回响应返回响应发送请求发送请求返回响应返回响应表单验证的内容表单验证的内容-1不能为空且不能为空且不能有数字不能有数字不能为空且不能为空且不能有数字不能有数字不能为空，且只不能为空，且只能包括字母、数能包括字母、数字和下划线字符字和下划线字符密码不能为空并且最密码不能为空并且最少为少为6位，还要求两位，还要求两次输入的密码要一致次输入的密码要一致表单验证的内容表单验证的内容-2不能为空且包含不能为空且包含字符字符和和.只能二选一只能二选一年月日不能年月日不能为空，且不为空，且不能超出其要能超出其要求的范围求的范围表单

12、验证的思路表单验证的思路-1 如何编写脚本验证表单？如何编写脚本验证表单？1、获取表单元素的值（、获取表单元素的值（String类型），然后进行判断类型），然后进行判断2、触发、触发表单表单（FORM）的提交事件的提交事件（onSubmit）表单验证的思路表单验证的思路-2常用的常用的String对象对象使用使用 var 语句语句 var newstr=这是我的字符串这是我的字符串创建创建 String 对象对象 var newstr=new String(这是我的字符串这是我的字符串“)调用方法和属性调用方法和属性 字符串对象字符串对象.属性名属性名 字符串对象字符串对象.方法名方法名()表

13、单验证的思路表单验证的思路-3名名 称称说说 明明属性属性length获取字符串字符的个数获取字符串字符的个数方法方法indexOf(“子字符串子字符串”，起始位置，起始位置)查找子字符串的位置查找子字符串的位置charAt(index)获取位于指定索引位置的获取位于指定索引位置的字符字符substring(index1,index2)求子串求子串toLowerCase()将字符串转换成小写将字符串转换成小写 toUpperCase()将字符串转换成将字符串转换成大写大写 String对象常用的属性和方法对象常用的属性和方法语法：语法：indexOf(“查找的子字符串查找的子字符串”，查找的起

14、始位置，查找的起始位置)返回子字符串所在的位置；如果没找到，返回返回子字符串所在的位置；如果没找到，返回 1例如：例如：var xvar y=“abcdefg”;x=y.indexOf(“c”,0);/返回结果为返回结果为2，起始位置是，起始位置是0表单验证的思路表单验证的思路-4查看完整代码查看完整代码检查电子邮件检查电子邮件email是否包含是否包含“”和和”.”function checkEmail()var strEmail=document.myform.txtEmail.value;if(strEmail.length=0)alert(电子邮件不能为空电子邮件不能为空!);retu

15、rn false;if(strEmail.indexOf(,0)=-1)alert(电子邮件格式不正确电子邮件格式不正确n必须包含必须包含符号！符号！);return false;if(strEmail.indexOf(.,0)=-1)alert(电子邮件格式不正确电子邮件格式不正确n必须包含必须包含.符号！符号！);return false;return true;返回结果返回结果-1表示表示没找到没找到“”字符字符获取表单元素的值获取表单元素的值表单的提交事件表单的提交事件文本框控件文本框控件-1如何实现如下图所示，完善电子邮件的例子。如何实现如下图所示，完善电子邮件的例子。用户单击时用户

16、单击时,邮邮箱的提示信息箱的提示信息自动清除自动清除提示电子邮提示电子邮件格式不对件格式不对输入的信息输入的信息自动被选中自动被选中并高亮显示并高亮显示文本框控件文本框控件-2文本框对象的常用属性、方法、事件文本框对象的常用属性、方法、事件使用文本框对象的相关方法，实现选中效果使用文本框对象的相关方法，实现选中效果名名 称称说说 明明属性属性value设置或获取文本框的值设置或获取文本框的值方法方法focus()获得焦点获得焦点select()选中文本内容，突出显示输入区域选中文本内容，突出显示输入区域事件事件onFocus光标进入某个文本框光标进入某个文本框脚本运行脚本运行onBlur文本框

17、文本框失去焦点脚本运行失去焦点脚本运行onKeyPress当一个键按下并释放时去触发一个事件当一个键按下并释放时去触发一个事件文本框控件文本框控件-3 .function clearText()if(document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将请输入真实的电子邮箱，我们将 发送激活密码发送激活密码)document.myform.txtEmail.value=;document.myform.txtEmail.style.color=red;*必填必填清空文本框的内容清空文本框的内容修改文本框的颜色修改文本框的颜色文本框获得焦点就调文本框获得焦点

18、就调用方法用方法clearText()常见错误常见错误-1function validateform()if(sNameCheck()&passCheck()&bdaycheck()return true;else return false;提交按钮提交按钮type=submit清空按钮清空按钮type=reset常见错误常见错误-2function validateform()if(sNameCheck()&passCheck()&bdaycheck()return true;else return false;onsubmit不是提不是提交按钮的事件交按钮的事件总结总结请列举常用的样式属性？请列举常用的样式属性？请简述样式特效的实现思路？请简述样式特效的实现思路？请回答如何改变按钮背景图片的特效？请回答如何改变按钮背景图片的特效？请简述层的显示请简述层的显示/隐藏与图片的显示隐藏与图片的显示/隐藏特效的异同？隐藏特效的异同？