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

《用户登陆及密码修改》《JavaScript程序设计》课第11单元
课程单元教学设计
（2019～2020学年第1学期）
所属系部：计算机与通信工程学院
制定人：
合作人：
制定时间：2020.8
***学院教务处制
JavaScript程序设计课程单元教学设计
单元教学进度设计（纲要）
一、情境导入
介绍本节课的教学目标
二、引入
任务：密码修改的遮罩锁屏效果三、知识点讲解
增加元素如：<div id="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: 1px solid #ccc;
position: absolute;
z-index: 9999;
background: #fff;
display:none;
}
#login h2,#repass h2 {
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
color: #fff;
background: #044599;
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
margin: 0 0 20px 0;
}
#login h2 img,#repass h2 img{
float: right;
position: relative;
top: 14px;
right: 8px;
cursor: pointer;
}
#login er,
#login div.pass,#repass div.opass,
#repass div.npass{
font-size: 14px;
color: #666;
padding: 5px 0;
text-align: center;
}
#login input.text,#repass input.text{
width: 200px;
height: 25px;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
使用javascript访问元素的样式
document.getElementById(menu).style.color = 'green';
//锁屏功能
function lock() {
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();
}
function getInner() {
if(typeof window.innerWidth != 'undefined')
return {
width: window.innerWidth,
height: window.innerHeight
}
else
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
学生练习：密码修改的严谨验证
五、评比
检查学生完成情况
六、总结
密码修改的遮罩锁屏效果。