看了同学们的好多代码，解决一些问题，可还是运行不出来？求指教：）-慕课网

首页课程实战体系课手记专栏慕课教程

看了同学们的好多代码，解决一些问题，可还是运行不出来？求指教：）

来源：3-3 编程练习

深呼吸_0

2015-08-30 10:07

不知道为什么还是弄不出来？

写回答关注

3回答

qq_嘟恏犇掰_0: 2015-09-02 17:02:18

已采纳

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
    <title>Document</title>
<style>
*{
    margin:0;
    padding:0;
  }
    .head{
      font-size:12px;
      padding:6px 0 0 10px;
    }
     #login_box{
      width:300px;
      height:150px;
      background:#eee;
      border:1px solid #ccc;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-150px;
      margin-top:-75px;
      display:none;
    }
     #login_box p{
      height:20px;
      border-bottom:1px solid #ccc;
      font-size:12px;
      padding:6px 0 0 5px;
      font-weight:bold;
    }
     #close{
      width:14px;
      height:14px;
      background:url(close.png) no-repeat;
      position:absolute;
      right:4px;
      top:6px;
      
    }
</style>
  <script>
      window.onload=function(){
        var login_btn=document.getElementById('login'),
            login_box=document.getElementById('login_box'),
            close=document.getElementById('close');
        // 封装添加事件监听程序
        function addEvent(ele,type,hander){
           // 执行代码
          if(ele.addEventListener){//验证是否支持DOM2级事件
             ele.addEventListener(type,hander,false);
          }else if(ele.attachEvent){//验证是否支持IE事件
          ele.attachEvent('on'+type,hander);
          }else{//验证是否支持DOM0级事件
          ele['on'+type]=hander;
          }
        }
        // 显示登录层函数
        function showLogin(){
          // 执行代码
          login_box.style.display="block";
        }
        // 隐藏登录层函数
        function hideLogin(){
          // 执行代码
          login_box.style.display="none";
        }
        //点击登录按钮显示登录层 
        // 执行代码
        addEvent(login_btn,'click',function(){

            showLogin();
        });
        //点击关闭按钮隐藏登录层
        // 执行代码
        addEvent(close,'click',function(){
            hideLogin();
        });
      };
  </script>
</head>
<body>
<div>亲，您好！<input type="button" value="登 录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close">x</span>
</div>  
</body>
</html>

1 0

深呼吸_0

非常感谢！

2015-09-02 17:51:06

共 1 条回复 >

小姑娘技术好

2015-09-03 00:22:18

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.head{font-size:12px;padding:6px 0 0 10px;}
#login_box{width:300px;height:150px;background:#eee;
border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
#login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
#close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px;cursor: pointer;}
</style>
<script>
window.onload=function(){
var login_btn=document.getElementById('login'),
login_box=document.getElementById('login_box'),
close=document.getElementById('close');
// 封装添加事件监听程序
function addEvent(ele,type,hander){
if(ele.addEventListener){ele.addEventListener(type, hander,false)}
else if(ele.attachEvent){ele.attachEvent('on'+type,hander)}
else{
ele['on'+type]=hander; }
};
// 显示登录层函数
function showLogin(){
login_box.style.display='block';
}
// 隐藏登录层函数
function hideLogin(){
login_box.style.display='none';
};
// 执行代码
addEvent(login_btn,'click',showLogin);
addEvent(close,'click',hideLogin);
//击关闭按钮隐藏登录层
// 执行代码
}
</script>
</head>
<body>
<div>亲，您好！<input type="button" value="登录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close">关闭</span>
</div>
</body>
</html>

0 0
深呼吸_0

2015-09-02 17:51:36

谢谢！

0 0

DOM事件探秘

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

99544 学习 · 1197 问题

查看课程

相似问题

老师你好，我的代码执行不出来怎么就运行不出来看看就是

回答 1

请问注释那里我写的代码哪里错了，为什么显示不出来？？求指教

回答 2

运行没有效果，提问代码哪里出了问题？

回答 3

正确代码来了！好多小伙伴没有写关闭这的代码

回答 1

是不是改版了，怎么查看别人的代码没有运行这个按钮

回答 2

打开慕课网App查看更多内容