制作简易登录界面

长户

已于 2023-04-14 19:21:29 修改

阅读量534

点赞数 2

文章标签： css html css3

于 2023-04-11 22:32:36 首次发布

本文链接：https://blog.csdn.net/Chuang_Hu/article/details/130057503

版权

石家庄邮电职业技术学院#校园前端学习分享第二期#征文石家庄邮电职业技术学院

石家庄邮电职业技术学院#校园前端学习分享第二期#征文
石家庄邮电职业技术学院

制作最基础的登录界面

在大家刚开始学习HTML和js的时候经常会用到使用登录界面的情况

下面为大家提供的一种情况

CSS代码如下

body{
				background:#eee;
				font-family: "黑体";
			}
			h1{
				font-size:30px;
				text-align: center;
				letter-spacing:30px;;
			}
			.ipt{
				width:200px;
				height:30px;
				border:1px solid#ccc;
				border-radius:8px;
				padding-left:15px;
				outline: none;
			}
			.chk{
				width:11px;
				height:11px;
			}
			.astyle{/*去除超链接的下划线*/
				text-decoration: none;
			}
			.astyle:link,.astyle:visited{/*设置超链接默认和访问过后的颜色*/
				color:black;
			}
			.astyle:hover{/*鼠标划过超链接时的颜色*/
				color:mediumblue;
			}
			.btn{
				width:200px;
				height:20px;
				border: 1px solid:darkblue;
				border-radius: 16px;
				background:#666 ;
				font-size:14px;
				font-weight: bold;
				letter-spacing: 20px;
				color:#fff;
				text-align:center;
				padding-left: 20px;	
			}
			.btn:hover{
				background:#0000CD;
				color:#333;
			}

HTML代码如下

	<body>
		<h1 align="center">登录</h1>
		<center>
			<form action="" method="post">
				<p>
					<input type="text" placeholder="请输入邮箱" class="ipt" id="use" />
				</p>
				<div id="email_prompt"></div>
				<p>
					<input type="password" placeholder="请输入密码" class="ipt" id="pwd">
				</p>
				<p>
					<input type="checkbox" class="chk" />记住密码
					<a href="register.html" id="registerBtn">注册新用户</a>
				</p>
				<p>
					<input type="sumbit" value="登录" class="btn" onclick="login()">
				</p>
			</form>
		</center>
	</body>

js代码如下

 <script>
            let use = document.getElementById('use');
            let pwd = document.getElementById('pwd');
            function login() {
                let dateUse = localStorage.getItem(use.value);
                console.log(dateUse)
                let dateObj = JSON.parse(dateUse);
                console.log(dateObj);
                if (use.value == dateObj.username && pwd.value == dateObj.password) {
                    alert('登陆成功');
                    dateObj.tag = cbx.checked;
                    localStorage.setItem(use.value, JSON.stringify(dateObj));
                    location.href = 'https://www.baidu.com';
 
                } else {
                    alert('用户名或者密码错误')
                }
            }
            use.onblur = function () {
               
                let res = localStorage.getItem(use.value);
             
                res = JSON.parse(res);
                if (res != null && res.tag) {
                    cbx.checked = true;
                    pwd.value = res.password;
                }
            }
 
        </script>

点击注册后的界面

注册代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>登录注册忘记密码页面</title>
		<link rel="stylesheet" href="css/normalize.min.css" />
		<link rel="stylesheet" href="css/register.css" />
	</head>

	<body>
		<div id="formContainer" class="dwo">
			<div class="formLeft">
			</div>
			<div class="formRight">
				<!-- Register form -->
				<form id="register" class="otherForm">
					<header>
						<h1>用户注册</h1>
						<p>注册后享受更多服务</p>
					</header>
					<section>
						
						<label>
              <p>邮箱</p>
              <input type="email" id="email" />
              <div class="border"></div>
            </label>
						<label>
              <p>密码</p>
              <input type="password" id="pwd" />
              <div class="border"></div>
            </label>
						
						<button id="btn" type="button">注 册</button>
					</section>
					<footer>
						<a href="阶段案例.html">返 回</a>
					</footer>
				</form>
			</div>
		</div>
		<script src="js/register.js"></script>
	</body>

</html>

注册js代码如下

document.getElementById("btn").onclick = function(){
	var email = document.getElementById("email").value;
	var password = document.getElementById("pwd").value;
	var userInfo = {
		username: userName,
		password: passweord,
		email: email,
	};
	sessionStorage.setItem("userInfo",JSON.stringify(userInfo));
	alert("注册成功");
	setTimeout('location.href = "login.html"',1000);
	
};

重点

onblur

可以使用input标签的onblur属性，在失去焦点事件中添加验证登录信息的JS代码

其中，validateLogin()函数用于验证用户名和密码是否正确，如果正确就打开登录页面，否则就提示用户重新输入。

sessionStorage

sessionStorage的属性有Key和Value，保存了大量的数据。

失效时间
sessionStorage的生命周期仅在当前会话有效。sessionStorage引入了“浏览器窗口的概念”。sessionStorage在同源窗口中始终存在数据，只要浏览器窗口没有关闭，刷新或者重新进入页面数据依然存在。关闭浏览器窗口后数据会被删除。再次独立打开同一个窗口同一个页面，sessionStorage也是不一样。

存储的位置
sessionStorage都保存在客户端，一般不与服务器进行通信交互。

存储的大小
sessionStorage存储数据大小一般是5MB

存储内容的类型
sessionStorage只能存储字符串类型，对于复杂对象可以使用ECMAScript对象的stringify和parse处理。