使用原生的HTML+CSS+JavaScript实现简单的注册登录切换效果

最新推荐文章于 2024-09-15 21:53:51 发布

小黄人儿_9988

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量128

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_40850583/article/details/141176483

版权

Tab切换注册登录效果在网页中很常见，熟知的小米、淘宝、京东等平台都是使用的Tab登录或者是Tab注册登录。所以我也尝试着写了这个案例

本案例效果图如下：

注册效果

登录模块效果

本案例除了实现切换之外，还有数据校验相关的功能，可以帮住大家练习HTML、CSS和JS

参考代码：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册登录</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: #08028a;
      }
      body {
        display: flex;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background: url(./images/login.jpg) no-repeat;
        background-size: cover;
      }
      .login_box {
        width: 600px;
        background-color: white;
        padding: 20px;
      }
      .login_box .head {
        display: flex;
        justify-content: center;
        font-size: 30px;
        margin-bottom: 20px;
      }
      li {
        flex: 1;
        text-align: center;
        cursor: pointer;
      }
      .content input,
      button {
        width: 100%;
        height: 40px;
        padding: 5px;
        margin-bottom: 30px;
      }
      button {
        height: 70px;
        font-size: 20px;
        background-color: #08028a;
        color: white;
      }
      .active {
        border-bottom: 4px solid #08028a;
      }
      .operation {
        display: flex;
        justify-content: space-between;
      }
      .left input {
        width: 15px;
        height: 15px;
      }
      .isShow {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="login_box">
      <ul class="head">
        <li>注册</li>
        <li class="active">登录</li>
      </ul>
      <div class="content">
        <div class="regist isShow">
          <input type="text" placeholder="用户名" class="sign_username" />
          <input type="password" placeholder="密码" class="sign_password" />
          <input
            type="password"
            placeholder="再次输入密码"
            class="re_password"
          />
          <button class="sign">立即注册</button>
        </div>
        <div class="login">
          <input type="text" placeholder="用户名" class="username" />
          <input type="password" placeholder="密码" class="password" />
          <div class="operation">
            <div class="left">
              <input type="checkbox" />
              <label for="">记住密码</label>
            </div>
            <div class="right">
              <a href="JavaScript:;">忘记密码</a>
            </div>
          </div>
          <button class="login_now">立即登录</button>
        </div>
      </div>
    </div>
    <script>
      // 获取DOM元素
      let head = document.querySelector('.head')
      let list = document.querySelectorAll('li')
      let divs = document.querySelectorAll('.content>div')
      let login_now = document.querySelector('.login_now')
      let sign = document.querySelector('.sign')
      let sign_username = document.querySelector('.sign_username')
      let sign_password = document.querySelector('.sign_password')
      let re_password = document.querySelector('.re_password')
      let username = document.querySelector('.username')
      let password = document.querySelector('.password')
      let sings = document.querySelector('content')
      var index
      let user = localStorage.getItem('user')
        ? JSON.parse(localStorage.getItem('user'))
        : []
      // 实现tab栏的切换
      for (let i = 0; i < list.length; i++) {
        list[i].onclick = function () {
          var index = i
          for (let i = 0; i < list.length; i++) {
            list[i].classList.remove('active')
          }
          this.classList.add('active')
          for (let i = 0; i < divs.length; i++) {
            divs[i].classList.add('isShow')
          }
          divs[index].classList.remove('isShow')
        }
      }
      // 注册
      sign.onclick = function () {
        if (
          sign_username.value === '' ||
          sign_password.value == '' ||
          re_password.value == ''
        ) {
          alert('信息不完整')
        } else if (re_password.value !== sign_password.value) {
          alert('两次密码输入不一致，请重新输入')
        } else {
          alert('注册成功!!')
          user.push({
            username: sign_username.value,
            password: sign_password.value
          })
          localStorage.setItem('user', JSON.stringify(user))
          sign_username.value = ''
          sign_password.value = ''
          re_password.value = ''
          list[0].classList.remove('active')
          list[1].classList.add('active')
          divs[0].classList.add('isShow')
          divs[1].classList.remove('isShow')
        }
      }
      // 登录
      login_now.onclick = function () {
        if (username.value === '' || password.value === '') {
          alert('用户名和密码不能为空')
        } else {
          for (let i = 0; i < user.length; i++) {
            if (
              user[i].username === username.value &&
              user[i].password === password.value
            ) {
              alert('登录成功')
              location.href = './index.html'
              break
            } else {
              alert('用户名或密码错误')
              username.value = ''
              password.value = ''
              break
            }
          }
        }
      }
    </script>
  </body>
</html>