【WEB前端 用户登录，注册，忘记密码的简单实现】 |
您所在的位置：网站首页 › python忘记密码 › 【WEB前端 用户登录，注册，忘记密码的简单实现】 |
【WEB前端 用户登录，注册，忘记密码的简单实现】
|
WEB前端 用户登录，注册，忘记密码的简单实现 HTML 部分 UserRetrieve.html 用户找回 styleRetrieve.css 这个是用户找回，或者说是忘记密码的css特效 忘记密码点击获取验证码 点击跳转登录 提交更改这个是忘记密码的界面搭建运用了一些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
UserSignUp.html 用户注册界面 注册已有账户？点击登录 注册 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转换为文本形式 点击了过后就会展示密码 用到的图片 在代码中我是更改了图片大小的 这里展现 的是原图片大小。你可以把我提供图片换成你喜欢的 
我这个地方的图片其实相当于登录页面的一个头像功能，点击这个可以实现密码框的password换成text来展示你的密码，就相当于查看你的密码
比如你的密码是123456
password出现的密码是*****这样子的形式。
text出现的就是123456.
登录
用户名
密码
忘记密码 | 跳转注册？ 登录 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; } } 这个地方用的是一个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.xn||i.y |
right.png 
当密码不符合条件时的图片 wrong.png
【本文地址】
今日新闻 |
推荐新闻 |