HTML——登录、注册页⾯的跳转登录界⾯和注册界⾯如下所⽰：
login.html代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</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%;
}
#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;htmlradio的text出不来
</style>
</head>
<body>
<div id="loginDiv">
<form action="" id="form">
<table>
<h2 >⽴即登录</h2></br>
<tr><td >邮箱</td></tr>
<tr><td><input class="line" type="text" id="L_email"></td></tr>
<tr><td >密码</td></tr>
<tr><td > <input class="line" type="password" placeholder="密码长度⾄少为6位" id="L_pwd"></td></tr>
</table>
</br>
<p ><a href="#">忘记密码?</a></p>
<div >
<input type="button" id="L_login" value="登录" onclick=javascrtpt:jump1()>
<input type="button" id="L_register" value="注册" onclick=javascrtpt:jump2()>
</div>
</form>
</div>
<script>
hange = function(){
var L_email = this.value;
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if(!st(L_email)){
alert("邮箱格式不正确，请重新输⼊！");
return false;
}
}
hange = function(){
var L_pwd = this.value;
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
if(!st(L_pwd)){
alert("密码长度要⼤于6位，由数字和字母组成，请重新输⼊！");
return false;
}
}
var Item("email");
var Item("password");
console.log("email:"+email);
console.log("pwd:"+password);
function jump1(){
console.ElementById("L_email").value);
console.log(+ElementById("L_pwd").value);
var Email = ElementById("L_email");
var Password = ElementById("L_pwd");
if(email==ElementById("L_email").value && password==ElementById("L_pwd").value){              alert("登录成功，点击确定进⼊我的个⼈相册！");
window.location.href="My_Album.html";
}
else if(Email.value == "" || Password.value =="") {
alert("邮箱或密码不能为空！");
return false;
}
else{
alert("邮箱或密码错误！");
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;
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 >⽴即注册</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 type="radio" name="sex" value="男" checked="checked" ></span>
<span>⼥</span>
<span><input 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 >已有账号就登录吧，好久不见！</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。