3-3 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现点击页面中的登录按钮，显示登录层(使用DOM2级监听事件哦！）

任务

一、获取登录按钮及整个登录面板，给登录按钮添加事件，点击时让登录层示，点击登录面板的关闭按钮，关闭整个登录层

  提示:
  1.注意IE浏览器与非IE浏览器之间的兼容问题

 

index.html 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 	 *{margin:0;padding:0;}
  8.      .head{font-size:12px;padding:6px 0 0 10px;}
  9.      #login_box{width:300px;height:150px;background:#eee;
  10.      border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
  11.      #login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
  12.      #close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px;}
  13. 	</style>
  14. 	<script>
  15.       window.onload=function(){
  16.       	var login_btn=document.getElementById('login'),
  17.       	    login_box=document.getElementById('login_box'),
  18.       	    close=document.getElementById('close');
  19.       	// 封装添加事件监听程序
  20.         function addEvent(ele,type,hander){
  21.            // 执行代码  
  22.       	}
  23.         // 显示登录层函数
  24.       	function showLogin(){
  25.       		// 执行代码
  26.         }
  27.         // 隐藏登录层函数
  28.         function hideLogin(){
  29.           // 执行代码
  30.         }
  31.         //点击登录按钮显示登录层 
  32.         // 执行代码
  33.         //点击关闭按钮隐藏登录层
  34.         // 执行代码
  35.  
  36. 	</script>
  37. </head>
  38. <body>
  39. 	<div class="head">亲，您好！<input type="button" value="登 录" id="login"></div>
  40. 	<div id="login_box">
  41. 		<p>用户登录</p><span id="close"></span>
  42. 	</div>
  43. </body>
  44. </html>
下一节