JavaScript jQuery网页特效设计任务驱动教程（第2版）-教案 单元5、6 设计表单控件类网页特效、 设计导航菜单类网页特效.docx

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

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

2、ript+jQue”网页特效设计任务驱动教程（第2版）作业设计教材P170自主训练教学过程教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好上课前的各项准备工作（打开计算机、打开课件、打开软件、打开授课计划、教案等），吸引学生注意力。课程说明从特效欣赏“实现注册表单中的网页特效”引入教学内容。课程内容描述【特效赏析】任务57实现注册表单中的网页特效网页0501hIm1中的注册表单如图所示。用户注J1设告设置S：曲磷认密码，输入地M出生日期，所在地区，,76位字母或U字，无警殊字苻?013V4V?0*。男O*“鼻断叫立即注通网页0501.Hm1中的注册表单网页0501h

3、tm1中的注册表单对应的HTM1代码如表所示。网页0501.htm1中的注册表单对应的HTM1代码序号程序代码010203040506070809101112用户注册设置登录名：1415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172设置密码：确认密码：输入EmaiI地址：出生日期：optionva1ue=”请选择年ftnbsp;年se1ectid=*bmonth*name=*bmonth*onchange=*cha

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

5、040506070809101112131415.ts_bg16padding-right:5px;17disp1ay:in1ine;18padding-1eft:5px;19font-size:12px;20backgrnd:ur1(iBgests-bg.jpg)21repeat-;22f1oat:1eft;23co1or:red;241ine-height:44px;25height:44px2627.tsbg1(28disp1ay:in1ine;f1oat:1eft2930.tsbg2disp1ay:in1ine;f1oat:1eft).tsdisp1ay:in1ine;fbat:1ef

6、t;position:re1ative;top:-1Ipx).szdcdisp1ay:in1ine;f1oat:1eft;width:400px网页0501h1mI的注册表单中实现年、月、日级联关系的JaVaSCriPt代码如表所示。注册收单中实现年、月、H级联关系的JaVaSCriPt代码序号程序代码0102030405060708091011121314151617181920212223242526272829303132!functionStartDateOvaryearVa1ue=*,monthVaIUe=,dayVa1ue;monHead=31,28,31,30,31,30,31,

7、31,30,31,30,31：vary=newDate().getFu1IYear();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=newDateO.getMonth()+1;varn=monHeadnew

8、DateO.getMonth();if(newDateO.getMonthO=1&isPinYear(yearVa1ue)n+;writeDay(n);document,memberform,bday.va1ue=newDateO.getDate();初始化if(document.attachEvent)window.attachEvent(on1oad”,StartDate);e1sewindow.addEvent1istener(,1oad*,StartDate,fa1se);functionChangeMonth(Str)年发生变化时日期发生变化(主要是判断闰平年)(monthVa1ue=document.memberform,bmonth.options