登录界面和注册界面如下所示：
login.html代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(images/background.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(246, 250, 250, 0.6);
box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);
border-radius: 300px;
}
#loginDiv:hover{
filter: grayscale(60%);
}
input{
text-align: center;
border:none;
background-color: rgba(239, 248, 250, 0.1);
border-bottom:1px solid rgb(80, 196, 241);
width: 200px;
}
#L_login {
border-color: cornsilk;
background-color: rgba(59, 194, 248, 0.8);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
#L_register {
border-color: cornsilk;
background-color: rgba(59, 194, 248, 0.8);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="loginDiv">
<form action="" id="form">
<table>
<h2 style="text-align: center; color: rgb(59, 194, 248);">立即登录</h2></br>
<tr><td style="text-align: center; color: gray;">邮箱</td></tr>
<tr><td><input class="line" type="text" id="L_email"></td></tr>
<tr><td style="text-align: center; color: gray;">密码</td></tr>
<tr><td > <input class="line" type="password" placeholder="密码长度至少为6位" id="L_pwd"></td></tr>
</table>
</br>
<p style="text-align: center;color: rgb(59, 194, 248);"><a href="#">忘记密码?</a></p>
<div style="text-align: center;margin-top: 15px;">
<input type="button" id="L_login" value="登录" onclick=javascrtpt:jump1()>
<input type="button" id="L_register" value="注册" onclick=javascrtpt:jump2()>
</div>
</form>
</div>
<script>
L_email.onchange = function(){
var L_email = this.value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!reg.test(L_email)){
alert("邮箱格式不正确，请重新输入！");
return false;
}
}
L_pwd.onchange = function(){
var L_pwd = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
if(!reg.test(L_pwd)){
alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
return false;
}
}
var email=localStorage.getItem("email");
var password=localStorage.getItem("password");
console.log("email:"+email);
console.log("pwd:"+password);
function jump1(){
console.log(document.getElementById("L_email").value);
console.log(+document.getElementById("L_pwd").value);
var Email = document.getElementById("L_email");
var Password = document.getElementById("L_pwd");
if(email==document.getElementById("L_email").value && password==document.getElementById("L_pwd").value){
alert("登录成功，点击确定进入我的个人相册！");
window.location.href="My_Album.html";
}
else if(Email.value == "" || Password.value =="") {
alert("邮箱或密码不能为空！");
return false;
}
else{
alert("邮箱或密码错误！");
return false;
}
}
function jump2(){
window.location.href="register.html";
}
</script>
</body>
</html>register.html代码实现：
<!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>register</title>
<style>
html{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(images/background.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
input{
text-align: center;
border:none;
background-color: rgba(239, 248, 250, 0.1);
border-bottom:1px solid rgb(80, 196, 241);
width: 260px;
}
p{
text-align: center;
color: rgb(116, 114, 114);
}
.R_register{
margin-top: 30px;
width: 600px;
justify-content: center;
align-items: center;
text-align: center;
height: 600px;
background-color: rgba(246, 250, 250, 0.7);
box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);
}
.R_login{
margin-top: 30px;
width: 300px;
justify-content: center;
align-items: center;
height: 600px;
background-color: rgba(167, 150, 150,0.6);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.3);
}
#R_registerbtn {
border-color: cornsilk;
background-color: rgba(59, 194, 248, 0.6);
color: aliceblue;
border-style: hidden;
border-radius: 15px;
width: 190px;
height: 31px;
font-size: 16px;
}
#R_loginbtn{
border: 20px solid white;
background-color: rgba(71, 196, 245, 0.6);
border-radius: 50%;
color: aliceblue;
border-style: hidden;
border-radius: 15px;
width: 100px;
height: 31px;
font-size: 16px;
}
.title{
color: white;
text-align: center;
}
</style>
</head>
<div class="R_register">
<h3 style="color: rgb(122, 211, 247);">立即注册</h3>
<p>邮箱</p>
<p><input type="text" id="R_email"></p>
<p >用户名</p>
<p><input type="text" placeholder="用户名长度不能超过5位" id="R_user"></p>
<p> 性别</p>
<p>
<span>男</span>
<span><input style="width: auto;" type="radio" name="sex" value="男" checked="checked" ></span>
<span>女</span>
<span><input style="width: auto;" type="radio" name="sex" value="女" ></span>
</p>
<p >头像</p>
<p><input type="file" id="toux"></p>
<p >密码</p>
<p><input type="password" placeholder="密码长度至少为6位且为数字和字母的组合" id="R_pwd"></p>
<p >确认密码</p>
<p><input type="password" placeholder="两次密码需一致" id="R_repwd" onkeyup="checkpassword()"></p>
<span id="tishi"></span></input>
<p><button id="R_registerbtn" onclick=javascrtpt:jump()>注册</button></p>
</div>
<div class="R_login">
<br><br>
<h3 class="title">已有账号？</h3>
<p style="color: white;">已有账号就登录吧，好久不见！</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><button id="R_loginbtn" onclick=javascrtpt:jump3()>登录</button></p>
</div>
<script>
R_email.onchange = function(){
var R_email = this.value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!reg.test(R_email)){
alert("邮箱格式不正确，请重新输入！");
return false;
}
}
R_user.onchange = function(){
var R_user= this.value;
var reg = /^\S{1,5}$/;
if(!reg.test( R_user)){
alert("用户名长度不能超过5位！");
return false;
}
}
R_pwd.onchange = function(){
var R_pwd = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
if(!reg.test(R_pwd)){
alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
return false;
}
}
function checkpassword() {
var password = document.getElementById("R_pwd").value;
var repassword = document.getElementById("R_repwd").value;
if(password == repassword) {
document.getElementById("tishi").innerHTML="<font color='green'>两次密码输入一致</font>";
}else {
document.getElementById("tishi").innerHTML="<font color='red'>两次输入密码不一致!</font>";
}
}
function jump(){
localStorage.setItem("username",document.getElementById("R_user").value);
localStorage.setItem("password",document.getElementById("R_pwd").value);
localStorage.setItem("email",document.getElementById("R_email").value);
var Email = document.getElementById("R_email");
var User = document.getElementById("R_user");
var Toux = document.getElementById("toux");
var Password = document.getElementById("R_pwd");
var Repassword = document.getElementById("R_repwd");
if(Email.value == "" || User.value ==""|| Toux.value ==""|| Password.value =="") {
alert("邮箱、用户名、头像或密码不能为空！");
return false;
}
else if(Password.value == Repassword.value) {
alert("注册成功，欢迎进入登录界面！");
window.location.href="login.html";
}
else{
alert("注册信息有误！");
}
}
function jump3(){
window.location.href="login.html";
}
</script>
</body>
</html>
更多推荐
HTML——登录、注册页面的跳转
发布评论