体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

5-2作业题

来源：5-2 作业题

helen_papa

2018-05-08 09:08:49

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>作业</title>
  <link href="css/style.css" rel="stylesheet"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
 </head>
 <body>
 <!--顶部部分-->
 <div class="top">
 <!--顶部左侧部分-->
  <div class="topLeft">
  <ul>
   <li><a href="#" class="loginLink">亲，请登录</a></li>
   <li><a href="#" class="regeLink">免费注册</a></li>
   <li><a href="#">手机逛慕淘</a></li>
  </ul> 
  </div>
    <!--顶部右侧部分-->
  <div class="topRight">
  <ul>
   <li>
    <div class="myShop">
    <a href="#" class="own">我的慕淘
     <span><img src="icon/21.png"></span>
    </a>
    <div class="top-content">
     <a href="#">已买到的宝贝</a>
     <a href="3">我的足迹</a>
    <div>
    <div>
   </li>
   <li>
    <div class="myShop">
    <a href="" class="own">收藏夹
     <span><img src="icon/21.png"></span>
    </a>
    <div class="top-content">
     <a href="#">收藏的宝贝</a>
     <a href="#">收藏的店铺</a>
    <div>
    </div>
   </li>
   <li>
    <a href="#" class="own">商品分类</a>
   </li>
   <li>
    <div class="myShop">
    <a href="#" class="own">卖家中心
    <span><img src="icon/21.png"></span>
    </a>
    <div class="top-content">
     <a href="#">已卖出的宝贝</a>
     <a href="#">已出售的宝贝</a>
    <div>
    </div>
   </li>
   <li>
       <div class="myShop">
    <a href="#" class="own">联系客服
    <span><img src="icon/21.png"></span>
    </a>
    <div class="top-content">
     <a href="#">消费者客服</a>
     <a href="#">卖家客服</a>
    <div>
    </div>
   </li>
  </ul>  
  </div>
 </div>
 
<!--登录页-->
 <!--弹出层遮罩-->
  <div class="layer-mask" id="layer-mask">
   </div>
  <!--弹出层窗体-->
  <div class="layer-pop" id="layer-pop">
   <!--弹出层关闭按钮-->
   <div class="layer-close">
    <img src="icon/20.png"/>
   </div>
   <!--弹出层内容-->
   <div class="layer-content" id="layer-content"></div>
  </div>

    <!--登录窗体-->
    <div id="loginHtml" style="display:none">
     <div class="login">
       <h4 class="title">登录</h4>
        <div class="item">
          <input id="username" class="input" name="username" type="text" placeholder="请输入登录邮箱或手机号"/>
          <p class="error-msg"></p>
          </div>
         <div class="item">
          <input id="password"  class="input" name="password" type="password" placeholder="6-16位密码，区分大小写，不能用空格"/>
          <p class="error-msg"></p>
         </div>
         <div class="i-autolog">
          <div class="autolog">
             <input type="checkbox" name="autolog"/>下次自动登录
             </div>
             <div class="forgetpas">
              <a href="">忘记密码</a>
             </div>
         </div>
         <div class="item">
          <input type="button" name="button" class="button" value="登录"  />
         </div>
         <div class="pics">
          <img src="icon/xinlang.png" class="pic"/>
          <img src="icon/weixin.png" class="pic"/>
          <img src="icon/QQ.png" class="pic"/>
         </div>
    </div>
    </div>
   
    <!--注册窗体-->
    <div id="regeHtml" style="display:none">
     <div class="login">
     <div class="i-login">
       <h4 class="title">注册</h4>
       </div>
          <div class="item">
          <input id="username" class="input" name="username" type="text" placeholder="请输入登录邮箱或手机号"/>
          <p class="error-msg"></p>
         </div>
         <div class="i-identify">
          <div class="identify-contain">
             <input type="text" name="identify" class="identify" placeholder="请输入验证码" />
             <p class="error-msg"></p>
             </div>
             <div class="identify-pic">
              <img src="img/verify.png"/>
             </div>
         </div>
         <div class="item">
          <input type="button" name="button" class="button" value="登录"  />
         </div>
         <div class="pics">
          <img src="icon/xinlang.png" class="pic"/>
          <img src="icon/weixin.png" class="pic"/>
          <img src="icon/QQ.png" class="pic"/>
         </div>
    </div>
    </div>
   
   
 </body>
</html>

*{
 padding:0;
 margin:0;
}
/*顶部部分*/
.top{
 height:40px;
 margin:0 30px;
 background:#f3f5f7;
 border-bottom:1px solid gray;
 font-size:14px;
 }
a{
 text-decoration: none;
 color:black;
}
.top ul li{
 list-style:none;
 display:inline-block;
 }
/*top左边部分*/
.topLeft{
 float:left;
 margin-left:20px;
 line-height:30px;
 }
.topLeft ul li{
 margin:5px;
}
.loginLink{
 color:orange;
}
/*top右边部分*/
.topRight{
 float:right;
 margin-right:20px;
 margin-top:10px;
 }
.topRight .myShop{
 position:relative;
 padding:0 15px;
 
 
}
.topRight .top-content{
 display:none;
 position: absolute;
 font-size:14px;
 background-color:white;
 
}
.topRight .top-content a{
 display:block;
 padding:5px 2px;
 text-align:center;
 
 }
.myShop:hover .top-content{
 display:block;
}
.myShop:hover{
 background-color:#fff;
}
.topLeft li a:hover,.topRight .own:hover{
 color:orange;
}
.topRight .top-content a:hover{
 background-color:#cdd0d4;
}

<!--登录页-->
<!--弹出层遮罩-->
.layer-mask{
 display:none;
 top:0;
 left:0;
    z-index:9999;
 position:fixed;
 width:100%;
 height:100%;
 background-color:black;
 opacity:0.5;
}
<!--弹出层窗体-->
.layer-pop{
 display:none;
 top:0;
 bottom:0;
 right:0;
 left:0;
 margin:auto;
 position:fixed;
 z-index:10000;
 width:400px;
 height:300px;
 background-color:pink;
}
<!--弹出层关闭按钮-->
.layer-close{
 float:right;
 margin-right:20px;
 background:#eee;
}
<!--登录窗体-->
.login h4{
 font-size:20px;
 line-height:70px;
 }
.login .input{
 padding:10px 5px;
 border-radius:2px;
 border:1px solid grey;
 width:250px;
 }
.login .item{
 margin:20px auto;
 }
.login .i-autolog .autolog{
 float:left;
}
.login .i-autolog .forgetpas{
 float:right;
}
.login .button{
 background-color:red;
 color:white;
 padding:10px 5px;
 border-radius:2px;
 width:250px;
 border:1px solid red;
}
.login .error-msg
{
 color:#e40;
}
.login .pics{
 display:inline-block;
 
}
.login .pic{
 padding:10px;
 border:1px solid gray;
 background-color:gray;
 border-radius:50%;
}

$(document).ready(function($){
 
 /*登录链接*/
 $(".loginLink").click(function(){
  var loginHtml=$("#loginHtml").html();
  showLayer(loginHtml,400,300,closeCallback);
  
 /*登录表单检验*/
     $("#username").click(function(){
      var username=$("input[name='username']").val();
      if((username=="")||(username==null)){
       $(".error-msg").html("用户名不能为空");
       return ;
      }
      else if(isNaN(username)){
       $(".error-msg").html("请填写11位数字");
      }
      else if(username.value.length!==11){
      $(".error-msg").html("请填写11位数字");
     }
 });
     $("#password").click(function(){
      var password=$("input[name='password']").val();
      if(password=""){
       $(".error-msg").html("密码不能为空");
      }
      else if(password.length<6||password.length>16){
       $(".error-msg").html("密码输入有误");
      }
     });
    });
    
 /*注册链接事件*/
 $(".regeLink").click(function(){
  var regeHtml=$("#regeHtml").html();
  showLayer(regeHtml,400,300,closeCallback);
  
    /*注册表单检验*/
     $("#username").click(function(){
      var username=$("input[name='username']").val();
      if(username=""){
       $(".error-msg").html("用户名不能为空");
      }
      else if(isNaN(username)){
       $(".error-msg").html("请填写11位数字");
      }
      else if(username.length!==11){
      $(".error-msg").html("请填写11位数字");
     }
 });
   $(".identify").click(function(){
    var identify=$("input[name='identify']").val();
    if(identify!=="GYgy"){
     $(".error-msg").html("验证码输入不正确");
    }
   });
  });
 
  /*弹出层关闭回调函数*/
 function closeCallback(){
  $(".error-msg").html("");
 }
 /*显示弹出层*/
 function showLayer(html,width,height,closeCallback){
  $("#layer-mask").show();
  $("#layer-pop").show();
  $("#layer-pop").css({
   width:width,
   height:height
  });
  $("#layer-content").html(html);
  $("#layer-close").click(function(){
   hideLayer();
   closeCallback();
  });
 }
 
 /*隐藏弹出层*/
 function hideLayer(){
  $("#layer-mask").hide();
  $("#layer-pop").hide();
 }
});

有几个问题请教老师：1那个关闭按钮为什么一打开页面就出现了

2.遮罩层和弹出层窗体设置没效果

3.表单验证点击其中一个框时，错误提示就出来了，并且所有框错误提示都一样


写回答

1回答

好帮手慕夭夭

2018-05-08

已采纳

经过测试 , 问题及建议如下：

  1. 练习题中给注册登录的内容设置隐藏 ,但是按钮没有设置,如下

    http://img.mukewang.com/climg/5af1148700013e5104520350.jpg

    想要删除按钮隐藏可以设置display:none属性

  2. 遮罩层和弹出层窗体设置没效果 .因为css样式表里面有错误的语法注释,如下

    http://img.mukewang.com/climg/5af1163a0001805d02410067.jpg

    css正确注释语法:

    http://img.mukewang.com/climg/5af1165f0001469a01310058.jpg

  3. 表单验证点击其中一个框时，错误提示就出来了是因为表单绑定的是点击事件,建议修改成失去焦点事件,如下

    http://img.mukewang.com/climg/5af116da0001264e03060040.jpg

  4. 点击其中一个表单,所有框错误提示都一样是因为$(".error-msg")会把所有类名为error-msg的标签都选择上,建议修改如下:

    http://img.mukewang.com/climg/5af1178a00018b7603880039.jpg

    自己动手实战一下吧,祝学习愉快 !

0
helen_papa
h 感谢！！！！！
h018-05-08
共1条回复

0 学习 · 36712 问题

查看课程

相似问题

关于5-2的作业题

回答 1

5-2作业题

回答 2

5-2作业求救

回答 4

5-2作业问题

回答 2

5-2问题

回答 1

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