实用登录框 - 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="logo">
 2         <img src="logo.png">
 3     </div>
 4     <section>
 5         <div class="username">
 6             <input type="text" placeholder="用户名">
 7             <p></p>
 8         </div>
 9         <div class="password">
10             <label for="">
11                 <img class="eye" src="./close.png" alt="">
12             </label>
13             <input type="password" placeholder="密码">
14             <p></p>
15         </div>
16         <div class="remember">
17             <samp></samp>
18             <span>记住我的登录状态</span>
19         </div>
20         <button>立即登录<span>&gt;</span></button>
21     </section>

View Code

CSS代码:

  1 <style>
  2     * {
  3         margin: 0;
  4         padding: 0;
  5         border: none;
  6         box-sizing: border-box;
  7         font-family: 'Microsoft Yahei';
  8         font-size: 62.5%;
  9         color: #ffffff;
 10     }
 11 
 12     body {
 13         height: 100vh;
 14         background: url('./bg.png') no-repeat center center;
 15         background-size: 100% 100%;
 16         text-align: center;
 17        /*  或者:
 18         background: url("./bg.png") no-repeat center;
 19         background-attachment: fixed;*/
 20         /* 当内容高度大于图片高度时背景图像的位置相对viewport固定 */
 21         /* background-size: cover; */
 22         /* 让背景图基于容器大小伸缩 */ 
 23     } 
 24 
 25     .logo>img {
 26         margin: 150px auto;
 27     }
 28 
 29     section {
 30         width: 17.5vw;
 31         margin: 0 auto;
 32     }
 33 
 34     section>div {
 35         margin-bottom: 30px;
 36     }
 37 
 38     section>div>input {
 39         border-bottom: 1px solid #ffffff;
 40         background: transparent;
 41         text-align: center;
 42         width: 100%;
 43         padding: 10px;
 44         outline: none;
 45         position: relative;
 46     }
 47 
 48     section>div>input::-webkit-input-placeholder {
 49         color: #ffffff;
 50         opacity: .5;
 51     }
 52 
 53     section>div>input:-ms-input-placeholder {
 54         color: #ffffff;
 55         opacity: .5;
 56     }
 57 
 58     section>div>p {
 59         position: absolute;
 60         display: none;
 61         text-align: left;
 62         color: #ff0000;
 63     }
 64 
 65     section>.remember {
 66         display: flex;
 67         text-align: left;
 68         align-items: center;
 69     }
 70 
 71     section>.remember>samp {
 72         display: block;
 73         width: 20px;
 74         height: 20px;
 75         margin-right: 10px;
 76         border: 1px solid #ffffff;
 77         border-radius: 3px;
 78         cursor: pointer;
 79     }
 80 
 81     section>.remember>.checked::before {
 82         display: block;
 83         width: 100%;
 84         height: 100%;
 85         background: #ffffff;
 86         content: '√';
 87         color: #4abdcc;
 88         text-align: center;
 89     }
 90 
 91     section>button {
 92         display: flex;
 93         align-items: center;
 94         margin: 0 auto;
 95         background: transparent;
 96         font-size: 2.8rem;
 97         letter-spacing: 5px;
 98         cursor: pointer;
 99     }
100 
101     section>button>span {
102         display: inline-block;
103         width: 30px;
104         height: 30px;
105         padding-left: 10px;
106         border-radius: 50%;
107         background-color: #ffffff;
108         color: #4abdcc;
109         text-align: center;
110         font-family: 'heiti';
111         line-height: 30px;
112     }
113     section>.password{
114         position: relative;
115     }
116     section>.password img {
117         position: absolute;
118         top: 7px;
119         right: -10px;
120         width: 20px;
121         cursor: pointer;
122     }
123 
124 </style>

View Code

JavaScript:

核心部分开关思想(假设法)值得注意的: (1) 当密码和用户名同时正确时,点击按钮才可以跳转到跳转页面,因此要用到开关思想(假设法),假设用户名和密码校验不正确,不通过,点击按钮时,判断检验是否正确(布尔判断),正确,则把用户名的value和密码的value值赋值给对应的 localStorage存储,并判断是否勾选了勾选框,是,则记住密码 localStorage.remember = true;,否则名,为false.然后跳转页面,外面判断如果是记住状态,就把存储的 username 和 password 给对应的 value 值,并把校验的假设改为真,否则,请清空 username和password的value值,并把勾选框的checked 类名也清除. (2) 密码信息的显示和隐藏: 设置一个变量flag 假设密码能看见为1,用布尔值判断,如果falg真(能看见),则type值变为password,密码不显示变flag为0,否则密码显示,type值为 text,变flag为1;

 1 <script>
 2     window.onload = function () {
 3         
 4         var username = document.querySelector('.username>input');
 5         var password = document.querySelector('.password>input');
 6         var loginBtn = document.querySelector('button');
 7         var checkbox = document.querySelector('samp');
 8         var eye = document.querySelector('.eye');
 9 
10         // 假设用户名和密码校验不通过
11         var usernameCheck = false;
12         var passwordCheck = false;
13 
14 
15         // 设置一个变量 假设密码是能看见的
16         var flag = 1;
17         username.oninput = function () {
18            usernameCheck = hint(this,'用户名',4,16);
19         }
20         password.oninput = function () {
21             passwordCheck = hint(this,'密码',6,20);
22         }
23         eye.onclick = function () {
24             if (flag) {
25                 password.type = 'password';
26                 flag = 0;
27                 this.src = './close.png';
28             }else{
29                 password.type = 'text';
30                 flag = 1;
31                 this.src = 'open.png';
32             }
33         }
34         checkbox.onclick = function () {
35             this.className = this.className == 'checked' ? '' : 'checked';
36         }
37 
38         if (localStorage.remember == 'true') {
39             username.value = localStorage.username;
40             password.value = localStorage.password;
41             usernameCheck = true;
42             passwordCheck = true;
43             checkbox.className = 'checked';
44         } else {
45             username.value = '';//清空
46             password.value = '';
47             checkbox.className = '';
48         }
49         loginBtn.onclick = function () {
50             if (usernameCheck && passwordCheck) {
51                 localStorage.username = username.value;
52                 localStorage.password = password.value;
53                 if (checkbox.className == 'checked') {
54                     localStorage.remember = true;
55                 } else {
56                     localStorage.remember = false;
57                 }
58                 location = '跳转页面01.html';
59             }else {
60                 alert('请输入正确的用户名和密码');
61             }
62         }
63       
64 
65 
66         function hint(obj,str,min,max) {
67             if (obj.value.length == '') {
68                 inform(obj,str+'不能为空','red','block');
69                 return false;
70             }  else if (obj.value.length < 4 || obj.value.length > 12) {
71                 inform(obj,'输入的'+str+'的长度要在'+min+'~'+max+'字符之间','red','block');
72                 return false;
73             } else {
74                 inform(obj,str+'输入正确','green','block');
75                return true;
76             }
77         }
78         function inform(obj,text,color,displays) {
79             obj.nextElementSibling.innerHTML = text;
80             obj.nextElementSibling.style.color = color;
81             obj.style.borderBottomColor = color;
82             obj.nextElementSibling.style.display = displays;
83         }
84     }
85 </script>

View Code

跳转页:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
        font-size: 62.5%;
        font-family: 'Microsoft Yahei';
        color: #ffffff;
    }
    body {
        width: 100vw;
        height: 100vh;
        background: url('./bg.png') no-repeat center;
        background-size: 100% 100%;
        text-align: center;
    }
    .bg>.login {
        margin: 100px auto;
    }
    .bg>#lips {
        margin: 0 auto;
        font-weight: bold;w
        font-size: 2.5rem;
    }
</style>
<script>
    window.onload = function () {
        document.querySelector('p').innerHTML= '亲爱的'+localStorage.username +'登陆成功, 欢迎登陆本系统';
    }
</script>
</head>
<body>
    <div class="bg">
        <div class="login"><img src="./logo.png" alt=""></div>
        <p id="lips"></p>
    </div>
</body>
</html>

posted on 2019-10-27 22:00 Leoragelovexer 阅读(227) 评论(0) 收藏举报

刷新页面返回顶部