JavaScriptjQuery网页特效设计任务驱动教程（第2版）-教案 单元5--9 设计表单控件类网页特效---设计页面类网页特效.docx

《JavaScriptjQuery网页特效设计任务驱动教程（第2版）-教案 单元5--9 设计表单控件类网页特效---设计页面类网页特效.docx》由会员分享，可在线阅读，更多相关《JavaScriptjQuery网页特效设计任务驱动教程（第2版）-教案 单元5--9 设计表单控件类网页特效---设计页面类网页特效.docx（68页珍藏版）》请在第一文库网上搜索。

1、单元5设计表单控件类网页特效课程名称JaVaSCriPt+jQucry网页特效设计单元名称设计表单控件类网页特效教学内容设计表单控件类网页特效课时6项目性质口演示性口验证性口设计性J综合性授课班级授课日期授课地点教学目标学会设计表单控件类网页特效正确区分不同DOM事件的使用方法熟练使用JaVaSeriPt的鼠标事件、键盘事件、页面事件、表单及表单控件事件、编辑事件和evenI对象熟练使用JaVaSCriPt的事件方法熟练使用jQue”的事件方法教学难点JavaScriptjQue”的事件方法教学方法任务驱动法、分组讨论法、探究学习法教学准备计算机、多媒体教学设备教学课件PPT教材：JavaSc

2、ript+jQuer网页特效设计任务驱动教程（第2版）作业设计教材P170自主训练教学过程教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好上课前的各项准备工作（打开计算机、打开课件、打开软件、打开授课计划、教案等），吸引学生注意力。课程说明从特效欣赏“实现注册表单中的网页特效”引入教学内容。课程内容描述【特效赏析】任务57实现注册表单中的网页特效网页0501.htm中的注册表单如图所示。用户注Ji设置Jt爱名，j（e-16三字母项数不，无骨一字符设置密部确认密码，*人EaQIJft址I好日期，2013I4IX性别，。更。女所在地区，=选舟所份=-*立即注JH网页05

3、01.htmI中的注册表单网页0501htm1中的注册表单对应的HTM1代码如表所示。网页0501.htm1中的注册表单对应的HTM1代码序号程序代码01020304050607080910111213用户注册设置登录名：设置密码：14151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374确认密码：输入EmaiI地址：出生日期：se1ectid=byearname=*byear*onchange=*change

4、fonth(this.va1ue)*a1t=年份：无内容”optionva1ue=”请选择年nbsp;年optionva1ue=)选择月nbsp;月optionva1ue=选择日nbsp;日性别：男/1abe1  女所在地区：se1ectid=*province*tabindex=*10,onchange=*changeCity()*name=*province*a1t=*省份：无内容=选择所属省份=北京上海天津湖北湖南1iStyIe=margin-1eft:IIoPX75网页0501hIm1中主要应用的CSS代码如表所示。网页0501.htm1中主要应用的CSS代码序号程

5、序代码序号程序代码010203040506070809101112131415.tsbg16padding-right:5px:17disp1ay:in1ine;18padding-1eft:5px;19font-size:12px;20backgr1:ur1(inBges/ts_bg.jpg)21repeat-;22f1oat:1eft;23co1or:red;241ine-height:44px;25height:44px2627.tsbg1(28disp1ay:in1ine;f1oat:1eft2930.tsbg2disp1ay:in1ine;f1oat:1eft).tsdisp1ay:

6、in1ine;f1oat:1eft：position:re1ative;top:-1Ipx).szdcdisp1ay:in1ine;f1oat:1eft;width:400px网页0501htm1的注册表单中实现年、月、日级联关系的JaVaSCriPt代码如表所示。注册表单中实现年、月、日级联关系的JaVaSCriPt代码序号程序代码0102030405060708091011121314151617181920212223242526272829303132333435!functionStartDateOvaryearVaIue=*,monthVaIue=*,dayVa1ue;monHea

7、d=31,28,31,30,31,30,31,31,30,31,30,31：vary=newDateO.getFu11Year();for(vari=y-100:i=y;i+)document,memberform,byear.options,add(newOption(*+i,i);for(vari=1;i13;i+)document,memberform,bmonth.options,add(newOption(*+i,i);document,memberform,byear.va1ue=y;document,memberform.bmonth.va1ue=newDate().getMon

8、th()+1;varn=monHeadnewDateO.getMonth();if(newDateO.getMonth()=1&IsPinYear(yearVa1ue)n+;writeDay(n);document,memberform,bday.va1ue=newDateO.getDate();)初始化if(document.attachEvent)window.attachEvent(on1oad”,StartDate);e1sewindow.HddEvent1istener(,1oad,StartDate,fa1se);functionChangeMonth(str)/年发生变化时R期发生变化(主要是判断闰平年)(monthVa1ue=document.