JavaScript程序設計實例教程教案第11單元

《用戶登陸及密碼修改》《JavaScript程序設計》課第11單元課程單元教學設計（2019～2020學年第1學期）所屬系部：計算機與通信工程學院制定人：合作人：制定時間：2020.8***學院教務處制

JavaScript程序設計課程單元教學設計單元標題：密碼修改遮罩鎖屏效果單元教學學時2在整體設計中的位置第11次授課班級16移動開發(fā)班上課時間7周10月17日第1節(jié)至7周10月17日第2節(jié)上課地點計算機實驗室教學目標能力目標知識目標素質目標1.能夠實現(xiàn)用戶登陸及密碼修改的遮罩鎖屏效果。掌握窗口視口的獲取樹立學習信心；培養(yǎng)討論思考的習慣能力訓練任務任務：用戶登陸及密碼修改的遮罩鎖屏效果教學組織：帶領學生了解課程任務講解javascript操作樣式屬性實現(xiàn)遮罩鎖屏效果設計實現(xiàn)用戶登陸及密碼修改的遮罩鎖屏效果。本次課使用的外語單詞css3div+cssJavaScriptDocumentgetElementByIdmenustyledisplaymarginpositionbackgroundbackground-repeat案例和教學材料案例：密碼修改的遮罩鎖屏效果教學材料：1.教材名稱：《JavaScript程序設計實例教程》第2版.主編：程樂、鄭麗萍、劉萬輝.出版社：機械工業(yè)出版社，出版日期：2020.32.教學多媒體課件，項目源文件3.多媒體資料：/course/HCIT-12067068284.儀器與設備：計算機等

單元教學進度設計（綱要）步驟教學內容及能力/知識目標教師活動學生活動時間（分鐘）1情境導入介紹本節(jié)課的教學目標．導入本次課教學情境學生了解工作情境22引入任務：密碼修改的遮罩鎖屏效果交代任務學生接受任務33知識點講解密碼修改的遮罩鎖屏效果講解元素的添加和樣式的建立掌握元素的添加和樣式的建立10講解動態(tài)改變元素的樣式掌握動態(tài)改變元素的樣式10講解獲取文檔的高度和寬度掌握獲取文檔的高度和寬度10教師巡視，發(fā)現(xiàn)問題實現(xiàn)不同方式獲取文檔的高度和寬度154頁面鎖屏密碼修改的遮罩鎖屏效果教師演示掌握密碼修改的遮罩鎖屏效果的步驟和方法10教師巡視，發(fā)現(xiàn)問題密碼修改的遮罩鎖屏效果205評比檢查學生完成情況抽查學生完成情況，講解出現(xiàn)的問題演示自己的功能，修改出現(xiàn)的問題56總結密碼修改的遮罩鎖屏效果重點強調學生練習中出現(xiàn)的問題學生思考反饋5作業(yè)Javascript如何改變元素的可見性？課后體會一、情境導入 介紹本節(jié)課的教學目標二、引入 任務：密碼修改的遮罩鎖屏效果三、知識點講解增加元素如：<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{