JavaScript程序设计实例教程教案第11单元

《用户登陆及密码修改》《JavaScript程序设计》课第11单元课程单元教学设计（2019～2020学年第1学期）所属系部：计算机与通信工程学院制定人：合作人：制定时间：2020.8***学院教务处制

JavaScript程序设计课程单元教学设计单元标题：密码修改遮罩锁屏效果单元教学学时2在整体设计中的位置第11次授课班级16移动开发班上课时间7周10月17日第1节至7周10月17日第2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够实现用户登陆及密码修改的遮罩锁屏效果。掌握窗口视口的获取树立学习信心；培养讨论思考的习惯能力训练任务任务：用户登陆及密码修改的遮罩锁屏效果教学组织：带领学生了解课程任务讲解javascript操作样式属性实现遮罩锁屏效果设计实现用户登陆及密码修改的遮罩锁屏效果。本次课使用的外语单词css3div+cssJavaScriptDocumentgetElementByIdmenustyledisplaymarginpositionbackgroundbackground-repeat案例和教学材料案例：密码修改的遮罩锁屏效果教学材料：1.教材名称：《JavaScript程序设计实例教程》第2版.主编：程乐、郑丽萍、刘万辉.出版社：机械工业出版社，出版日期：2020.32.教学多媒体课件，项目源文件3.多媒体资料：/course/HCIT-12067068284.仪器与设备：计算机等

单元教学进度设计（纲要）步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）1情境导入介绍本节课的教学目标．导入本次课教学情境学生了解工作情境22引入任务：密码修改的遮罩锁屏效果交代任务学生接受任务33知识点讲解密码修改的遮罩锁屏效果讲解元素的添加和样式的建立掌握元素的添加和样式的建立10讲解动态改变元素的样式掌握动态改变元素的样式10讲解获取文档的高度和宽度掌握获取文档的高度和宽度10教师巡视，发现问题实现不同方式获取文档的高度和宽度154页面锁屏密码修改的遮罩锁屏效果教师演示掌握密码修改的遮罩锁屏效果的步骤和方法10教师巡视，发现问题密码修改的遮罩锁屏效果205评比检查学生完成情况抽查学生完成情况，讲解出现的问题演示自己的功能，修改出现的问题56总结密码修改的遮罩锁屏效果重点强调学生练习中出现的问题学生思考反馈5作业Javascript如何改变元素的可见性？课后体会一、情境导入 介绍本节课的教学目标二、引入 任务：密码修改的遮罩锁屏效果三、知识点讲解增加元素如：<divid="screen1"></div>遮罩样式设定：#change{ width:35px; height:30px; line-height:30px; cursor:pointer; } #screen1{ position:absolute; top:0; left:0; background:#000; z-index:9998; filter:alpha(opacity=30); opacity:0.3; display:none; } #login,#repass{ width:350px; height:250px; border:1pxsolid#ccc; position:absolute; z-index:9999; background:#fff; display:none; } #loginh2,#repassh2{ height:40px; line-height:40px; text-align:center; font-size:14px; letter-spacing:1px; color:#fff; background:#044599; margin:0; padding:0; border-bottom:1pxsolid#ccc; margin:0020px0; } #loginh2img,#repassh2img{ float:right; position:relative; top:14px; right:8px; cursor:pointer; } #logindiv.user, #logindiv.pass,#repassdiv.opass, #repassdiv.npass{ font-size:14px; color:#666; padding:5px0; text-align:center; } #logininput.text,#repassinput.text{ width:200px; height:25px; border:1pxsolid#ccc; background:#fff; font-size:14px; }使用javascript访问元素的样式 document.getElementById(menu).style.color='green';//锁屏功能 functionlock(){ scree.style.width=getInner().width+'px'; scree.style.height=getInner().height+'px'; scree.style['display']='block'; };if(repass.style['display']=='block') lock();change.onclick=function(){ repass.style['display']='block'; lock(); }functiongetInner(){ if(typeofwindow.innerWidth!='undefined') return{ width:window.innerWidth, height:window.innerHeight } else return{