《JAVA初中级备课完美版——CSS样式特效与表单验证课件.ppt》由会员分享，可在线阅读，更多相关《JAVA初中级备课完美版——CSS样式特效与表单验证课件.ppt（29页珍藏版）》请在三一办公上搜索。
1、CSS样式特效与表单验证,第四章,回顾,详述getElementById()的主要功能详述getElementsByName()的主要功能简述制作浮动广告图片的实现思路简述制作全选/反选多个复选框的实现思路,本章目标,会使用style样式属性动态改变边框颜色会使用className类名属性动态改变按钮背景图片会使用表单事件和脚本函数实现表单验证会使用String对象和文本框控件常用属性和方法实现客户端验证,回顾已学的CSS样式表-1,样式规则的语法是什么？用法有哪些？,行内样式,内嵌样式,外部样式表,回顾已学的CSS样式表-2-1,回顾HTML中讲过的CSS样式表，常见的样式有哪些？,回顾已学
2、的CSS样式表-2-2,回顾已学的CSS样式表-2-3,回顾已学的CSS样式表-3,制作如下图所示的“回顾样式.html”的页面效果,细边框样式,图片按钮样式,超链接样式,制作改变字体大小的样式特效,实现思路 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脚
3、本代码：fontSize,课堂练习,请编写如下图所示，实现随鼠标移入改变边框色的效果,练习代码,练习答案,鼠标移入边框颜色变为红色,制作改变按钮背景图片的特效-1,如何实现如下图所示，按钮的图片背景效果？,鼠标移入按钮背景变色,制作改变按钮背景图片的特效-2,演示示例8：改变样式backgroundImage演示,演示：通过改变样式backImage能否实现？,onMouseOver=this.style.backgroundImage=url(images/back2.jpg);,失败的原因：当鼠标移到按钮上方时，除了图片要换以外，还应保留 border、margin、padding等样式。
4、即使用多行代码onmouseOver=this.style.backImage=url(images/back2.jpg);this.style.boder=0;this.style.padding=0.;,解决办法：创建mouseOver和mouseOut两种类样式，然后使用className类属性进行切换,制作改变按钮背景图片的特效-3,.mouseOverStyle background-image:url(images/back2.jpg);color:#CC0099;border:0px;margin:0px;padding:0px;height:23px;width:82px;fo
5、nt-size:14px;.mouseOutStyle background-image:url(images/back1.jpg);color:#0000FF;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;,定义样式,制作改变按钮背景图片的特效-4,利用鼠标相关事件调用样式代码,使用className应用类样式,层的显示/隐藏特效,显示属性display,显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏,课堂练习,编写如下图所示，层的显示隐藏特效,使用函数的参
6、数，传递超链接的内容,修改按钮值：document.myform.placeButton.value=place,表单验证,服务器,IE,脚本在客户端执行，减轻服务器端的压力,发送请求,返回响应,发送请求,返回响应,发送请求,返回响应,表单验证的内容-1,不能为空且不能有数字,不能为空且不能有数字,不能为空，且只能包括字母、数字和下划线字符,表单验证的内容-2,不能为空且包含字符和.,只能二选一,年月日不能为空，且不能超出其要求的范围,表单验证的思路-1,如何编写脚本验证表单？,1、获取表单元素的值（String类型），然后进行判断,2、触发表单（FORM）的提交事件（onSubmit）,表单
7、验证的思路-2,常用的String对象使用 var 语句 var newstr=这是我的字符串创建 String 对象 var newstr=new String(这是我的字符串“)调用方法和属性 字符串对象.属性名 字符串对象.方法名(),表单验证的思路-3,String对象常用的属性和方法,语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置；如果没找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c”,0);/返回结果为2，起始位置是0,表单验证的思路-4,查看完整代码,检查电子邮件email是否包含“”和”.”,func
8、tion checkEmail()var strEmail=document.myform.txtEmail.value;if(strEmail.length=0)alert(电子邮件不能为空!);return false;if(strEmail.indexOf(,0)=-1)alert(电子邮件格式不正确n必须包含符号！);return false;if(strEmail.indexOf(.,0)=-1)alert(电子邮件格式不正确n必须包含.符号！);return false;return true;,返回结果-1表示没找到“”字符,获取表单元素的值,表单的提交事件,文本框控件-1,如何
9、实现如下图所示，完善电子邮件的例子。,用户单击时,邮箱的提示信息自动清除,提示电子邮件格式不对,输入的信息自动被选中并高亮显示,文本框控件-2,文本框对象的常用属性、方法、事件,使用文本框对象的相关方法，实现选中效果,文本框控件-3,.function clearText()if(document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将 发送激活密码)document.myform.txtEmail.value=;document.myform.txtEmail.style.color=red;*必填,清空文本框的内容,修改文本框的颜色,文本框获得焦点就调用方法clearText(),常见错误-1,function validateform()if(sNameCheck(),提交按钮type=submit,清空按钮type=reset,常见错误-2,function validateform()if(sNameCheck(),onsubmit不是提交按钮的事件,总结,请列举常用的样式属性？请简述样式特效的实现思路？请回答如何改变按钮背景图片的特效？请简述层的显示/隐藏与图片的显示/隐藏特效的异同？,
