实用登录框

Posted 2020-12-02 leoragelovexer

    /*

            需求：

                1. 点击模拟的 checkbox，会有勾选上的效果

                2. 用户名不能为空，且长度为 4-16 位

                3. 密码不能为空，且密码的长度为6-20位！

                4. 清除冗余代码

                5. 校验文字需要美观显示，不要用 alert

                6. 点击登录按钮，需要校验通过才能跳转

                7. 记住我的登录状态

                8. 在登录之后的个人页面中显示欢迎信息

            思路：

                1. 点击 samp 标签的时候，判断该标签有没有 class=‘checked‘，如果有，就去掉，如果没有，就加上

                2. 对用户名输入框注册 oninput 事件，每次输入的时候都进行校验

                3. 对密码输入框注册 oninput 事件，每次输入的时候都进行校验

                4. 将用户名和密码的校验封装成一个函数

                5. 将提示文字放到 p 标签中，并且让 input 的下边框变成红色

                6. 点击登录按钮，先判断用户名和密码是否已经通过校验，只有通过了，才会发生跳转

                7. 登录成功的时候记录用户名和密码，并且记录是否记住我的登录状态，然后在每一次网页加载的时候做判断

                8. 在个人页面中通过 localStorage 获取用户名，并显示

        */

html代码：

 1     <div class="box">
 2                 <label>
 3                     <img src="./logo.png" alt="">
 4                 </label>
 5                 <div class="inp1">
 6                     <input type="text" name="" id="user" placeholder="用户名">
 7                     <!-- 也可以placeholder="用户名" -->
 8                     <p class="logU"></p>
 9                 </div>
10                 <div class="inp2">
11                     <input type="password" name="" id="password" placeholder="账号密码">
12                     <!-- 也可以placeholder="账号密码" -->
13                     <p class="logP"></p>
14                 </div>
15                 <div class="rem">
16                     <div class="checkBox"></div>
17                     <span>记住账号和密码</span>
18                 </div>
19                 <button>立即登录<span>&gt;</span></button>
20     </div>

View Code

css代码

  1 <style>
  2         * {
  3             margin: 0;
  4             padding: 0;
  5             border: none;
  6             color: #fff;
  7             outline: none;
  8             /* 去除input高亮边框 */
  9         }
 10 
 11         body {
 12             background: url("./bg.png") no-repeat center;
 13             background-attachment: fixed;
 14             /* 当内容高度大于图片高度时背景图像的位置相对viewport固定 */
 15             background-size: cover;
 16             /* 让背景图基于容器大小伸缩 */
 17             /* 
 18             或者  直接 height: 100vh;
 19               background: url("./bg.png") no-repeat center;
 20             vh直接把整个窗口平分为100vh份,每份1vh
 21              */
 22             text-align: center;
 23         }
 24 
 25         .box {
 26             width: 400px;
 27             margin: 100px auto 0;
 28             text-align: center;
 29             background: transparent;
 30         }
 31 
 32         .box>label>img {
 33             display: block;
 34             margin: 0 auto 120px;
 35         }
 36         .inp1,
 37         .inp2 {
 38             position: relative;
 39             width: 100%;
 40             margin-top: 40px;
 41             display: block;
 42         }
 43         .box>.inp1>input,
 44         .box>.inp2>input{
 45             width: 390px;
 46             height: 30px;
 47             text-indent: 44%;
 48             border-bottom: 1px solid #ffffff;
 49             color: #eee;
 50             background-color: transparent;
 51             cursor: auto;
 52             
 53         }
 54         .box>.inp1>#user::-webkit-input-placeholder,
 55         .box>.inp2>#password::-webkit-input-placeholder{
 56             color: #ffffff;
 57             opacity: .5;
 58         }
 59         .box>.inp1>#user::-ms-input-placeholder,
 60         .box>.inp2>#password::-ms-input-placeholder {
 61             color: #ffffff;
 62             opacity: .5;
 63         }
 64         .logU,
 65         .logP {
 66             font-size: 12px;
 67             color: #f00;
 68             position: absolute;
 69             left: 0;
 70         }
 71         .rem {
 72             text-align: left;
 73             margin: 15px auto 80px;
 74             display: flex;
 75             justify-content: left;
 76             align-items: center;
 77         }
 78         .rem>.checkBox {
 79             position: relative;
 80             width: 14px;
 81             height: 14px;
 82             border: 1px solid #ccc;
 83             border-radius: 5px;
 84             background: transparent;
 85             margin-right: 10px;
 86             cursor: pointer;
 87         }
 88         /* 谁需要加给谁 */
 89         .rem>.checked::before {
 90             display: block;
 91             position: absolute;
 92             top: -5px;
 93             width: 100%;
 94             color:tan;
 95             content: ‘?‘;
 96             
 97         }
 98         .rem>span {
 99             font-size: 14px;
100             color: whitesmoke;
101         }
102         .box>button {
103             font-size: 20px;
104             background: transparent;
105         }
106         .box>button>span {
107             display: inline-block;
108             width: 25px;
109             height: 25px;
110             border-radius: 15px;
111             background-color: skyblue;
112             margin-left: 8px;
113         }
114 </style>

View Code

javascript

 1     <script>
 2         window.onload = function () {
 3             // 获取元素
 4             var user = document.querySelector(‘#user‘);
 5             var password = document.querySelector(‘#password‘);
 6             var button = document.querySelector(‘button‘);
 7             var inp1 = document.querySelector(‘.inp1‘);
 8             var inp2 = document.querySelector(‘.inp2‘);
 9             var checkbox = document.querySelector(‘.checkBox‘);
10             // 登陆成功成功时,记录用户名和账号密码 并且记住登录状态,每次网页加载时做判断 
11             // 假设用户名和密码都不正确
12             var userCheck = false;
13             var passwordCheck = false;
14             // 注册事件
15             //当鼠标输入
16             user.oninput = function () {
17                 checkFun(this, ‘用户名‘, 6, 16);
18             }
19             password.oninput = function () {
20                 checkFun(this, ‘密码‘, 6, 20);
21             }
22             checkbox.onclick = function () {
23                 this.className = this.className == ‘checkBox checked‘ ? ‘checkBox‘ : ‘checkBox checked‘;
24             }
25             button.onclick = function () {
26                 // 点击登录按钮,判断用户名和密码是否同时正确 正确就跳转到跳转页面
27                 // 这里要用 假设思想 假设用户名和密码都正确 
28                 if (userCheck && passwordCheck) {
29                     // 保存用户名和密码,刷新网页还显示
30                     localStorage.user = user.value;
31                     localStorage.password = password.value;
32                     //判断是否勾选记住密码了
33                     if (checkbox.className == ‘checkBox checked‘) {
34                         localStorage.rem = true;
35                     } else {
36                         localStorage.rem = false;
37                     }
38                     window.location.href = ‘跳转页面.html‘;
39                 }
40             }
41             // 每次网页加载时做判断   假设勾选记住密码框 就把存储的对应的值给分别user和password 勾选框类名变为checked
42             if (localStorage.rem == ‘true‘) {
43                 user.value = localStorage.user;
44                 password.value = localStorage.password;
45                 userCheck = true;
46                 passwordCheck = true;
47                 checkbox.className = ‘checkBox checked‘;
48             } else {
49                 user.value = ‘‘;
50                 password.value = ‘‘;
51                 checkbox.className = ‘checkBox‘;
52             }
53 
54             /*
55             将用户名和密码的校验封装成一个函数
56                 声明一个函数，用于校验用户名和密码
57                 第一个参数：校验的对象
58                 第二个参数：提示文字
59                 第三个参数：最小值
60                 第四个参数：最大值
61             */
62             function checkFun(obj, str, min, max) {
63                 if (obj.value == ‘‘) {
64                     change(obj, ‘red‘, str + ‘不能为空‘, ‘‘);
65                     return false;
66 
67                 } else if (obj.value.length <= min || obj.value.length >= max) {
68                     change(obj, ‘red‘, ‘输入的字符长度要在‘ + min + ‘~‘ + max + ‘个字符之间‘, ‘‘);
69                     return false;
70                 } else {//恢复原状
71                     change(obj, ‘greenyellow‘, str + ‘输入正确‘, ‘greenyellow‘);
72                     return true;
73                 }
74             }
75             /*
76             将提示文字放到 p 标签中，并且让 input 的下边框变成红色
77                 声明一个函数，用于显示校验的提示
78                 第一个参数：校验的对象
79                 第二个参数：是否显示
80                 第三个参数：提示文字
81                 第四个参数：颜色
82             */
83             function change(obj, colorL, text, color) {
84                 obj.style.borderColor = colorL;
85                 obj.nextElementSibling.textContent = text;
86                 obj.nextElementSibling.style.color = color;
87             }
88         }
89     </script>

View Code