前端登录页面（背景换肤 + 密码错误提示 + 密码隐藏切换）

卡卡西最近怎么样

已于 2022-02-16 14:07:24 修改

阅读量1.8k

点赞数 14

分类专栏： JavaScript 零基础入门文章标签： css html javascript 前端开发语言

于 2022-02-16 13:38:08 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/122961540

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 43 订阅

订阅专栏

效果展示：

背景切换：

密码提示：（要求密码位数为6-16之间，可自行改变）

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       body{
       background: url('./登录/1.jpg') no-repeat center left;
      background-size: 2600px 1700px;
       }

   .bgbtn{
       width: 100px;
       height: 40px;
       background-color: rgb(118, 133, 160);
       color: rgb(223, 220, 215);
       font-size: 13px;
       font-weight: bold;
       margin: 10px;
       -webkit-border-radius:30px;
    -moz-border-radius:30px;
   }

   .btnx{
       width: 20px;
       height: 20px;
       box-sizing: border-box;
       position: absolute;
       top: 10px;
       left: 13px;
       background-color: rgb(204, 204, 204);
       border: 2px solid;
       border-color: rgb(59, 59, 59);
       color: rgb(59, 59, 59);
       text-align: center;
       line-height:13px;
       font-size: 23px;
       cursor: pointer;
   }

   .changebox{
       width: 900px;
       height: 130px;
       box-sizing: border-box;
       background-color: transparent 70%;
       position: absolute;
       right: 260px;
       top: 32px;
       display: none;
   }


   .imgbox li{
       border: 2px solid;
       border-color: rgb(190, 202, 202);
        list-style: none;
       float: left;
       margin-top: -7px;
       margin-left: 20px;
       margin-right: 20px;
       width:160px;
       height: 110px;
       background-color: rgb(67, 143, 243);
       cursor: pointer;
   }

   .imgg{
       width: 160px;
       height: 110px;
   }

  #divout{
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left:-216px;
      margin-top: -160px;
      display: inline-block;
      width: 450px;
      height: 180px; 
       background-color: transparent;
     
  }

  #divout #div1{
      box-sizing: border-box;
      display: inline-block;
      width: 450px;
      height: 55px;
      background-color:transparent;
      border-bottom:3px solid;
      border-color:  rgb(255, 255, 255) ;
      background-color: trans;
      padding-left: 10px;
      padding-top: 5px;
  }

  #divout #div2{
      box-sizing: border-box;
      display: inline-block;
      width: 450px;
      height: 70px;
      background-color: transparent;
  }

  #divout #div3{
      box-sizing: border-box;
      display: inline-block;
      width: 450px;
      height: 55px;
      background-color: transparent;
      border-bottom:3px solid;
      border-color: rgb(255, 255, 255) ;
      background-color: transparent;
      padding-left: 10px;
      padding-top: 5px;
  }

  #text1{
      height: 44px;
      width: 360px;
      border: 0;
      outline: none;
      font-size: 24px;
      background-color: transparent;
      color: rgb(255, 255, 255);
 }
 input::placeholder{
  color: rgb(255, 255, 255);
 }

  #pwd{
    height: 44px;
      width: 360px;
      border: 0;
      outline: none;
      font-size: 24px;
      background-color:transparent;
      color:   rgb(255, 255, 255) ;
  }

  #img1{
      position:absolute;
      right: 19px;
      top: 145px;
      width: 30px;
      height: 30px;
  }

  #yn{
      box-sizing: border-box;
      position:absolute;
      right: 50px;
      top: 400px;
      width: 400px;
      height: 60px;
  }

  .message{
      background:url(./登录/正确.png)  no-repeat left center ;
      background-size: 5% 100%;
      padding-left: 25px;
      font-weight: bold;
      color: rgb(255, 255, 255);
      display: none;
  }

  .wrong{
      background: url(./登录/错误空心.png) no-repeat left center;
      background-size: 5% 100%;
      color: rgb(214, 150, 150);
  }

  .right{
      background: url(./登录/正确.png) no-repeat left center;
      background-size: 5% 100%;
      color: rgb(150, 224, 166);
  }

.submit{
    position: absolute;
    top:520px;
    left: 505px;
    width: 455px;
    height: 70px;
    background-color: rgb(251, 191, 60);
    font-size: 35px;
    color: rgb(73, 73, 73);
    font-weight: bold;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
}
    </style>
</head>
<body>
    <button class="bgbtn">请 选 择 背 景</button>
    <div class="changebox"> 
        <div class="btnx">x</div>
        <UL class="imgbox">
          <li><img src="./登录/1.jpg" alt="" class="imgg"></li>
          <li><img src="./登录/2.jpg" alt="" class="imgg"></li>
          <li><img src="./登录/3.jpg" alt="" class="imgg"></li>
          <li><img src="./登录/4.jpg" alt="" class="imgg"></li>
        </UL>
   </div>
    <div id="divout">
        <div id="div1">
          <input type="text" id="text1" placeholder="请输入用户名">
        </div>
        <div id="div2">

        </div>
        <div id="div3">
            <label >
                <img src="./登录/密码隐藏 (4).png" alt="" id="img1">
            </label>
         <input type="password" id="pwd" autocomplete="off"  placeholder="请输入密码">
        </div>
    </div>

    <div id="yn">
      <p class="message">请输入正确的6-16位的密码</p>
    </div>

    <button class="submit">登 录</button>
    <script>
        var pwd=document.getElementById('pwd');
        var img=document.getElementById('img1');
        var mes=document.querySelector('.message');
        var btnx=document.querySelector('.btnx');
        var changebox=document.querySelector('.changebox');
        var bgbtn=document.querySelector('.bgbtn');
        var imgs=document.querySelector('.imgbox').querySelectorAll('img');
        for(var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
              document.body.style.backgroundImage='url('+this.src+')';
            }
        }

       btnx.onclick=function(){
         changebox.style.display='none';
       }
       bgbtn.onclick=function(){
           changebox.style.display='block';
       }

        pwd.onfocus=function(){
            mes.style.display='block';
        }
        pwd.onblur=function(){
            if(pwd.value.length<6||pwd.value.length>16){
                mes.className='message wrong';
                mes.innerHTML='请输入正确的符合要求的密码';
            }else{
                mes.className='message right';
                mes.innerHTML='符合要求'
            }
        }
        var flag=0;
        img.onclick=function(){
            if(flag==0){
                pwd.type="text";
                img.src="./登录/密码隐藏 (3).png";
                flag=1;
            }else{
                pwd.type="password";
                img.src="./登录/密码隐藏 (4).png";
                flag=0;
            }
        }

    </script>
</body>
</html>