前端实现登陆界面的判定

css代码如下：

*{     /* 使用通配符使内边距和外边距都清零*/
    margin:0;
    padding:0;
  }
  .box{
    width:100%; 
    /* 高度为100% */
    height:100vh;
     /*宽度为100vh  */
    background-repeat: no-repeat;
    /* 表示背景图像将仅显示一次，不会重复 */
    background-size: 100% 100%;
    /* 背景图像大小 */
  }
  .loginBox{
    background-color:rgba(255, 255, 255, 0.6);
    /* 背景图像颜色 */
    width:250px;
    /* 高度为 */
    height:300px;
    padding:25px 15px;
    /* 内边距 */
    position: absolute;
    /* static（正常定位） relative(相对定位) absolute(绝对定位) fixed(固定定位) sticky(粘性定位) */
    left:50%;
    /* 左边 */
    top:20%;
    /* 定位元素上外边距边界与其包含快上的边界之间的偏移 */
    transform: translate(-50%); 
    /* x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 */
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.6);
    /* 阴影位置 */
  }
  .textBox{
    margin-bottom:20px;
    /* 下边距 */
  }
  .textBox :nth-child(1){
    color:#FF5300;
    /* 颜色 */
    font-size: 20px;
    /* 字体大小 */
  }
  .textBox :nth-child(2){
    color:#b1b1b1;
    font-size: 12px;
  }
  .inpBox{
    display: flex;
    /* flex弹性布局 */
    justify-content: flex-start;
    /* 从行首起始位置开始排列 */
    
    align-items: center;
    background: white;
    border-radius: 25px;
    /* 圆角矩形 */
    padding:5px;
    margin-bottom: 15px;
  }
  .inpBox img{
    margin-right:10px;
  }
  .inpBox input{   /*使用的是后代选择题*/
    border: none;
    outline: none;   /*设置多个轮廓属性值*/
  }
  .textBox2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color:#FF5300;
  }
  .textBox2 span{
    border-bottom: 1px solid #FF5300;
    cursor: pointer;
  }
  .btnBox{
    padding:10px;
    font-size: 14px;
    background: #FF5300;
    color:white;
    text-align: center;
    border-radius: 25px;
    margin-top:20px;
    cursor: pointer;
  }
  .btnBox2{
    width:50px;
    text-align: center;
    margin: 10px auto;
    color:#4e4e4e;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #4e4e4e;  /*设置下边框的宽度*/
  }
  .textBox3{
    font-size: 20px;
    color:white;
    position:absolute;
    bottom: 50px;
    left:50px;
  }

html代码如下：

 <div class="box">
        <div class="loginBox">
          <div class="textBox">
            <span>登录</span>
            <span>Sign in</span>
          </div>
          <div class="inpBox">
            
            <input id="userName" type="text" placeholder="请输入用户名" value="Nihao">
            <!-- value属性为在输入框里面的值默认的 -->
          </div>
          <div class="inpBox">
            
            <input id="passwordVal" type="password" placeholder="请输入密码" value="123456">
            <!-- value属性为在输入框里面的值默认的 -->
          </div>
          <div class="textBox2">
            <span>验证码登录</span>
            <span>忘记密码</span>
          </div>
          <div class="btnBox" onclick="loginClick()">登 录</div>
          <div class="btnBox2">立即注册</div>
        </div>
        <div class="textBox3">
          为了您更好的使用，<br/>
          &emsp;&emsp;我们将不懈努力。
        </div>
      </div>

JavaScript代码如下：

 <div class="box">
        <div class="loginBox">
          <div class="textBox">
            <span>登录</span>
            <span>Sign in</span>
          </div>
          <div class="inpBox">
            
            <input id="userName" type="text" placeholder="请输入用户名" value="Nihao">
            <!-- value属性为在输入框里面的值默认的 -->
          </div>
          <div class="inpBox">
            
            <input id="passwordVal" type="password" placeholder="请输入密码" value="123456">
            <!-- value属性为在输入框里面的值默认的 -->
          </div>
          <div class="textBox2">
            <span>验证码登录</span>
            <span>忘记密码</span>
          </div>
          <div class="btnBox" onclick="loginClick()">登 录</div>
          <div class="btnBox2">立即注册</div>
        </div>
        <div class="textBox3">
          为了您更好的使用，<br/>
          &emsp;&emsp;我们将不懈努力。
        </div>
      </div>

效果如下：