html、scss、js实现登录与注册功能实例代码

首先看一下效果图，登录界面，后面的背景图片可以替换成任意喜欢的图片，当然也可以设置为纯色背景：

在这里插入图片描述

之后点击“立即注册”就可以来到注册页面：

在这里插入图片描述

接下来就直接上代码了，只设计前端界面部分：
1. html部分:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录/注册</title>
    <link rel="stylesheet" href="../../dist/css/common/auth.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1347266_1120imkhssrc.css">
    <script src="../../dist/js/jquery-3.3.1.min.js"></script>
    <script src="../../dist/js/auth.js"></script>
</head>
<body>
<button id="btn">登录/注册</button>
<div class="mask-wrapper">
    <div class="auth-group">
        <div class="close-group">
            <span class="close-btn icon-baseline-close-px iconfont"></span>
        </div>
        <div class="auth-scroll-wrapper">
            <div class="scroll-wrapper">
                <div class="auth-group signin-group">
                    <div class="auth-info">
                        <div class="title-group">
                        <span class="title">请登录</span>
                        <a href="javascript: void(0);" class="switch">立即注册></a>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" name="telephone" placeholder="请输入手机号">
                        </div>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password" placeholder="请输入密码">
                        </div>
                        <div class="input-group">
                            <label class="remember-label">
                                <input type="checkbox" class="remember" value="1"> 记住我
                            </label>
                        </div>
                        <div class="input-group">
                            <input type="submit" class="submit" value="立即登录">
                        </div>
                    </div>
                    </div>
                </div>
                <div class="auth-group signup-group">
                    <div class="auth-info">
                        <div class="title-group">
                        <span class="title">请注册</span>
                        <a href="javascript: void(0);" class="switch">立即登录></a>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" name="telephone" placeholder="请输入手机号">
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control" name="username" placeholder="请输入用户名">
                        </div>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password" placeholder="请输入密码">
                        </div>
                        <div class="input-group">
                            <input type="password" class="form-control" name="repeat-password" placeholder="确认密码">
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-code" name="graphic-code" placeholder="图形验证码">
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-code" name="message-code" placeholder="短信验证码">
                        </div>
                        <div class="input-group">
                            <input type="submit" class="submit" value="立即注册">
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
2. scss 部分：
(1)auth.scss
@import "init.scss";
@import "constants.scss";
.mask-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  // 设置背景图片
  background-image: url('../../../dist/images/auth/auth.min.gif');
  //opacity: 0.5;
  // 设置背景图片平铺重复的方向
  background-repeat: no-repeat;
  // 覆盖整个div盒子
  background-size: cover;
  //display: none;
  // 超过父盒子的大小，设置子盒子滚动显示
  overflow-y: scroll;
  //font-weight: 800;

  .auth-group {
    $authGroupWidth: 400px;
    $authGroupHeight: 540px;
    width: $authGroupWidth;
    height: $authGroupHeight;
    margin: 80px auto;
    //position: relative;

    .close-group {
      width: 100%;
      height: 40px;
      background: #fff;

      .close-btn {
        display: inline-block;
        float: right;
        width: 30px;
        height: 30px;
        cursor: pointer;
        margin-top: 10px;
      }
    }

    .auth-scroll-wrapper {
      width: $authGroupWidth;
      height: $authGroupHeight - 40px;
      position: relative;
      overflow: hidden;

      .scroll-wrapper {
        width: $authGroupWidth*2;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;

        .auth-group {
          width: $authGroupWidth;
          height: 100%;
          margin-top: 0;

          .auth-info {
            padding: 0 20px;
            box-sizing: border-box;

            .title-group {
              width: 100%;
              height: 56px;
              overflow: hidden;
              border-bottom: 1px solid $borderColor;
              line-height: 54px;

              .title {
                float: left;
                border-bottom: 3px solid $themeColor;
              }

              .switch {
                float: right;
                text-decoration: none;
              }
            }

            .form-group {
              margin-top: 20px;

              .input-group {
                margin-bottom: 20px;
                .form-control {
                  width: 100%;
                  height: 40px;
                  outline: none;
                  border: 1px solid $borderColor;
                  padding: 10px;
                  box-sizing: border-box;
                }

                .remember-label {
                  font-size: 14px;
                }
                .submit {
                  width: 100%;
                  height: 40px;
                  background: $themeColor;
                  border: none;
                  outline: none;
                  color: #fff;
                  cursor: pointer;
                }
              }
            }
          }
        }

        .signin-group {
          float: left;
          background: #fff;
          height: 300px;
        }

        .signup-group {
          float: right;
          background: #fff;

          .auth-info {
            .form-group {
            .input-group {
              .form-code {
                width: 70%;
                height: 40px;
                float: left;
                margin-bottom: 20px;
                outline: none;
                padding: 10px;
                box-sizing: border-box;
                border: 1px solid $borderColor;
              }
            }
          }
          }
        }
      }
    }
  }
}
(2)init.scss,因为本人使用的是Google浏览器，该部分scss是用来清除浏览器自带大样式的，如果您使用的是其他浏览器，可能这部分会不起作用。只需将您使用的浏览器自带的样式，复制到init.scss文件中，并且在auth.scss文件中进行import就可以了。
// Every scss files need init's
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {
  margin: 0;
  padding: 0;
}
(3)constants.scss文件用来定义一些常用的变量，
$themeColor: #5c87d9;
$assistColor: #878787;
$borderColor: #eeeeee;
$mainFrontColor: #212121;
3. js文件
(1)auth.js文件：

// 定义一个监听按钮登录和注册功能和关闭按钮的事件
$(function () {
    $("#btn").click(function () {
        $(".mask-wrapper").show();
    });
    $(".close-btn").click(function () {
        $(".mask-wrapper").hide();
    });
});

// 定义监听登录和注册页面之间的跳转事件
$(function () {
    $(".switch").click(function () {
        var scrollWrapper = $(".scroll-wrapper");
        var wrapperLeft = scrollWrapper.css("left");
        // 一定要将获取到的wrapperLeft的值（像素值）转换为整数，否者的话，不能进行与0比较
        currentLeft = parseInt(wrapperLeft);
        if(currentLeft < 0){
            scrollWrapper.animate({"left": "0"});
        }else {
            scrollWrapper.animate({"left": "-400px"});
        }
    });
});
4. 另外使用到的jquery-3.3.1.min.js文件，我也会上传文件，需要注意的是在html使用scss,js文件的时候，需要使用自己的文件路径。
链接：https://pan.baidu.com/s/17-sI4mWuoia3iL6Iec2ffw
提取码：gkr0
posted @ 2020-03-21 18:21  一笑而过~一笑奈何  阅读(2773)  评论(0)  编辑  收藏  举报