【WEB前端用户登录，注册，忘记密码的简单实现】

WEB前端用户登录，注册，忘记密码的简单实现HTML 部分UserRetrieve.html用户找回styleRetrieve.css这个是用户找回，或者说是忘记密码的css特效<div class="container"><div class="panel"><div class="content"><div class="switch">

꧁相遇天使꧂

7132人浏览 · 2021-12-06 01:02:13

꧁相遇天使꧂ · 2021-12-06 01:02:13 发布

WEB前端用户登录，注册，忘记密码的简单实现
HTML 部分

UserRetrieve.html

用户找回 styleRetrieve.css 这个是用户找回，或者说是忘记密码的css特效

<div class="container">
    <div class="panel">
        <div class="content">
            <div class="switch">
                <h1 id="signUp">忘记密码</h1>

            </div>

            <form action="">

                <div id="email" class="input"><input type="text" placeholder="邮箱"></div>
                <p><button id="getEmailCode">点击获取验证码</button></p>
                <div id="emailCode" class="input"><input type="text" placeholder="邮箱验证码"></div>
                <div id="password" class="input"><input type="password" placeholder="新密码" class="ipt">
                    <p class="message">请输入6~16位密码</p>
                </div>
                <div id="repeat" class="input"><input type="password" placeholder="确认密码" class="ipt1">
                    <p class="message1">请再次输入密码</p>
                </div>

                <p>
                    <a id="login" href="../简约的登录卡/index.html" class="input">点击跳转登录</a>
                </p>

                <button onclick="location.href='../简约的登录卡/index.html'" id="reset" type="button">提交更改</button>

            </form>
        </div>
    </div>
</div>

这个是忘记密码的界面搭建运用了一些js的知识点，以此来判断密码是否符合条件

css 部分

styleRetrieve.css

在这里插入代码* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    position: relative;
    width: 24rem;
}

.panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    width: 400px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
    border-radius: 10px;
    background-color: #f2f2f2;
}

.switch h1 {
    text-align: center;
    font-size: 1.4rem;
    color: rgba(125, 116, 255, .8);
    border-bottom: rgba(125, 116, 255, .8) solid 2px;
    cursor: default;
}

.input input {
    outline: none;
    width: 100%;
    border: none;
    background: none;
    border-bottom: .1rem solid #7d74ff;
    color: rgba(37, 215, 202, 0.84);
    font-size: 1rem;
}

.input::after {
    content: attr(aria-placeholder);
    position: absolute;
    left: 0;
    top: -20%;
    font-size: 1.1rem;
    color: rgba(125, 116, 255, 0.44);
    transition: .3s;
}

.input.focus::after {
    top: -70%;
    font-size: 1rem;
}

.input#forget {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

.input#forget:hover {
    color: rgba(138, 143, 255, 0.4);
}

.input#login {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

.input#login:hover {
    color: rgba(138, 143, 255, 0.4);
}

form p {
    text-align: center;
}

form span {
    color: #7d74ff;
    font-size: 0.8rem;
    cursor: default;
}

form {
    width: 12rem;
    margin: 1rem 0 0;
}

form .input {
    position: relative;
    opacity: 1;
    width: 100%;
    margin: 2rem 0 0;
    height: 42px;
}

form .input#email {
    margin: 3rem 0 0;
}

form button#reset {
    display: block;
    border: none;
    outline: none;
    margin: 2rem 56px 0;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
}

form button#reset:hover {
    border: none;
    outline: none;
    margin: 2rem -7px 0;
    width: 100%;
    height: 66px;
    border-radius: 3rem;
    background: linear-gradient(90deg, rgba(138, 143, 255, 0.75), rgba(216, 174, 255, 0.75));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    transition: .4s;
}

form button#getEmailCode {
    display: block;
    border: none;
    outline: none;
    width: 7rem;
    border-radius: 5%;
    background: linear-gradient(90deg, rgba(138, 143, 255, 0.76), rgba(182, 130, 255, 0.76));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
    color: #d3c2ff;
}

form button#getEmailCode:hover {
    background: linear-gradient(90deg, rgba(138, 143, 255, 0.5), rgba(182, 130, 255, 0.51));
    color: rgba(211, 194, 255, 0.7);
}
此处开始是在js用排他思想实现的css部分
.message {
    display: inline-block;
    font-size: 12px;
    color: #999;
    background: url(mess.png) no-repeat left center;
    padding-left: 20px;
}

.wrong {
    color: red;
    background-image: url(wrong.png);
}

.right {
    color: green;
    background-image: url(right.png);
}

.message1 {
    display: inline-block;
    font-size: 12px;
    color: #999;
    background: url(mess.png) no-repeat left center;
    padding-left: 20px;
}


.wrong1 {
    color: red;
    background-image: url(images１/wrong.png);
}

.right1 {
    color: green;
    background-image: url(images１/right.png);
}

片

用户注册页面其实和用户找回是差不多的

CSS 部分其实差不多基本上没有区别但是还是可以单独打一个出来

用户注册和用户找回处js实现的密码验证用的是排他思想

图片：mess.png

在这里插入图片描述
right.png
当密码不符合条件时的图片 wrong.png

UserSignUp.html

用户注册界面

            <form action="">

                <div id="userName" class="input"><input type="text" placeholder="用户名"></div>
                <div id="email" class="input"><input type="text" placeholder="邮箱">
                </div>
                <div id="password" class="input"><input type="password" placeholder="密码" class="ipt">
                    <p class="message">请输入6~16位密码</p>
                </div>


                <div id="repeat" class="input"><input type="password" placeholder="确认密码" class="ipt1">
                    <p class="message1">请确认密码</p>
                </div>

                <p>
                    <a id="login" href="index.html" class="input">已有账户？点击登录</a>
                </p>

                <button onclick="location.href='index.html'" type="button">注册</button>

            </form>
        </div>
    </div>
</div>

styleSignUp.css


* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    position: relative;
    width: 24rem;
}

.panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    width: 400px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
    border-radius: 10px;
}

.switch h1 {
    text-align: center;
    font-size: 1.4rem;
    color: rgba(125, 116, 255, .8);
    border-bottom: rgba(125, 116, 255, .8) solid 2px;
    cursor: default;
}

.input input {
    outline: none;
    width: 100%;
    border: none;
    background: none;
    border-bottom: .1rem solid #7d74ff;
    color: rgba(37, 215, 202, 0.84);
    font-size: 1rem;
}

.input::after {
    content: attr(aria-placeholder);
    position: absolute;
    left: 0;
    top: -20%;
    font-size: 1.1rem;
    color: rgba(125, 116, 255, 0.44);
    transition: .3s;
}

.input.focus::after {
    top: -70%;
    font-size: 1rem;
}

.input#forget {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

.input#forget:hover {
    color: rgba(138, 143, 255, 0.4);
}

.input#login {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

.input#login:hover {
    color: rgba(138, 143, 255, 0.4);
}

form p {
    text-align: center;
}

form span {
    color: #7d74ff;
    font-size: 0.8rem;
    cursor: default;
}

form {
    width: 12rem;
    margin: 1rem 0 0;
}

form .input {
    position: relative;
    opacity: 1;
    width: 100%;
    margin: 2rem 0 0;
    height: 42px;
}

form .input#userName {
    margin: 3rem 0 0;
}

form .input#password {
    height: 1.6rem;
}

form button {
    display: block;
    border: none;
    outline: none;
    margin: 2rem 61px 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
}

form button:hover {
    border: none;
    outline: none;
    margin: 2rem -7px 0;
    width: 100%;
    height: 3.5rem;
    border-radius: 3rem;
    background: linear-gradient(90deg, rgba(138, 143, 255, 0.75), rgba(216, 174, 255, 0.75));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    transition: .4s;
}

.message {
    display: inline-block;
    font-size: 10px;
    color: #999;
    background: url(mess.png) no-repeat left center;
    padding-left: 20px;
}

.wrong {
    color: red;
    background-image: url(.wrong.png);
}

.right {
    color: green;
    background-image: url(right.png);
}

.message1 {
    display: inline-block;
    font-size: 10px;
    color: #999;
    background: url(.mess.png) no-repeat left center;
    padding-left: 20px;
}

.wrong1 {
    color: red;
    background-image: url(images１/wrong.png);
}

.right1 {
    color: green;
    background-image: url(images１/right.png);
}

登录页面的实现，这个地方用到的js并不多，也就实现了点击一个图片可以实现密码部分的展示用的也是单击事件

pwd.type = ‘text’; 是将原本为password转换为文本形式

点击了过后就会展示密码

用到的图片在代码中我是更改了图片大小的这里展现的是原图片大小。你可以把我提供图片换成你喜欢的
在这里插入图片描述

在这里插入代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./index.css">

</head>

<body>
    <div class="loginBox">
        <img style="border-radius:50%;max-width:100px;max-height:100px;" src="tx.jpg" id="eye">
        我这个地方的图片其实相当于登录页面的一个头像功能，点击这个可以实现密码框的password换成text来展示你的密码，就相当于查看你的密码
比如你的密码是123456
password出现的密码是*****这样子的形式。
text出现的就是123456.


        <form action="">
            <h1 id="title"> 登录
            </h1>
            <div class="textArea">
                <input type="text" id="username" required>
                <label for="username"> 用户名
                    </label>
            </div>
            <div class="textArea">
                <input type="password" id="password" required>
                <label id="password"> 密码
                    </label>
            </div>

            <p>
                <a id="signUp" href="UserRetrieve.html" class="input"> 忘记密码
                    </a>
                <span> |
                    </span>
                <a id="forget" href="UserSignUp.html" class="input"> 跳转注册？
                    </a>
            </p>
            <div>
                <button class="button"> 登录
                </button>
            </div>
        </form>

        <script script script type="text/javascript" color="255.255.255" opacity='0.7' zIndex="-2" count="200" src="./canvas-nest.min.js">
        </script>


    </div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('password');
        var flag = 0;
        eye.onclick = function() {
            if (flag == 0) {
                pwd.type = 'text';
这里用的是头像的图片实际上你可以在密码框后面加一个眼睛的图片，来点这个来实现密码显示和不显示
                eye.src = 'tx.jpg'
                flag = 1;
            } else {
                pwd.type = 'password'
这个地方可以用闭着眼睛的图片
                eye.src = 'tx.jpg'
                flag = 0;
            }
        }
    </script>
</body>

</html>

这个地方用的是一个js特效
canvas-nest.min.js

!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

canvas-nest.min.js 这个特效用于其他地方好
CSS部分

index.css


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.loginBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    width: 400px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
    border-radius: 10px;
}

.loginBox h1 {
    text-align: center;
    font-size: 1.4rem;
    color: rgba(125, 116, 255, .8);
    border-bottom: rgba(125, 116, 255, .8) solid 2px;
}

#title {
    padding: 20px;
    border-bottom: 1px solid silver;
}

.textArea {
    width: 100%;
    height: 40px;
    margin-top: 20px;
    position: relative;
}

.textArea input {
    border: none;
    outline: none;
    height: 100%;
    width: 85%;
    background: none;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin-left: 7px;
}

.textArea::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 85%;
    height: 2px;
    background-color: #2691d9;
}

.textArea label {
    position: absolute;
    left: 8%;
    top: 25%;
    transition: 0.5s;
    font-size: 16px;
    color: #adadad;
    user-select: none;
    cursor: text;
}

.textArea input:focus~label,
.textArea input:valid~label {
    top: -30%;
}


/* 忘记密码 */

.pass {
    width: 85%;
    margin: 0 auto;
    margin-top: 25px;
    text-align: left;
    font-size: 14px;
    color: silver;
    cursor: pointer;
}

.pass:hover {
    text-decoration: underline;
}


/* 登录 */

#login {
    height: 50px;
    line-height: 50px;
    width: 85%;
    margin: 0 auto;
    margin-top: 35px;
    background-color: #2691d9;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    color: #e9f4fb;
    border-radius: 23px;
    transition: .2s;
}

#login:hover {
    border-radius: 25px;
}

.singUp {
    padding: 25px;
    display: flex;
    justify-content: center;
    width: 85%;
    margin: 0 auto;
}

.regsiter {
    cursor: pointer;
    color: #2691d9;
    margin-left: 10px;
}

.input#signUp {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

.input#signUp:hover {
    color: rgba(138, 143, 255, 0.4);
}

.input#forget {
    color: #7d74ff;
    font-size: 0.8rem;
    text-decoration: none;
}

form .input#userName {
    margin: 3rem 0 0;
}

form .input#password {
    height: 1.6rem;
}

form button {
    display: block;
    border: none;
    outline: none;
    margin: 2rem 61px 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(90deg, #8a8fff, rgb(216, 174, 255));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
}

form button:hover {
    border: none;
    outline: none;
    margin: 2rem -7px 0;
    width: 100%;
    height: 3.5rem;
    border-radius: 3rem;
    background: linear-gradient(90deg, rgba(138, 143, 255, 0.75), rgba(216, 174, 255, 0.75));
    box-shadow: 0 0 8px #8a8fff;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    transition: .4s;
}

运行结果展示
在这里插入图片描述
用户注册运行结果因为用户找回效果一样就不展示了

在这里你也可以扩展像登录页面一样的密码查看的操作