用纯JS和HTML搭建一个带登录和注册的动态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Main Page</title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
function User(username,email,password)
{
this.username = username;
this.email = email;
this.password = password;
}
var newUser = null;
var user = new User("123","123@qq.com","123");
document.getElementById("RE").onclick = function()
{
document.getElementById("submit").style.display = "none";
document.getElementById("Register").style.display = "flex";
}
document.getElementById("RegisterForm").onsubmit = function()
{
var Rpassword1 = document.getElementById("Rpassword1").value;
var Rpassword2 = document.getElementById("Rpassword2").value;
if(Rpassword1 === Rpassword2)
{
var username = document.getElementById("Rusername").value;
var email = document.getElementById("Remail").value;
newUser = new User(username,email,Rpassword1);
alert("注册成功");
document.getElementById("submit").style.display = "flex";
document.getElementById("Register").style.display = "none";
}
else
{
alert("两次输入的密码不一致")
}
}
document.getElementById("back").onclick = function()
{
document.getElementById("submit").style.display = "flex";
document.getElementById("Register").style.display = "none";
}
document.getElementById("password").onkeydown = function(event)
{
if(event.keyCode === 13)
{
document.getElementById("myForm").submit;
}
}
document.getElementById("myForm").onsubmit = function()
{
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
if(user.username === username || newUser.username === username)
{
if(user.email === email || newUser.email === email)
{
if(user.password === password || newUser.password === password)
{
alert("登陆成功");
document.getElementById("submit").style.display = "none";
document.getElementById("goods").style.display = "flex";
}
else
{
alert("登陆失败");
}
}
else
{
alert("登陆失败");
}
}
else
{
alert("登陆失败");
}
}
}
</script>
<div style="background-color: blue; width: 100%; height: 25%;"></div>
<div id="goods" style="display: none;">
<table align="center">
<tr>
<th>
<a href="html?p">Earbuds watch</a>
</th>
<th>
<a href="https://w>HD watch</a>
</th>
<th>
<a href="https:/68">Sports watch</a>
</th>
<th>
<a href="http88">4G watch</a>
</th>
</tr>
<tr>
<td>
<span>
<img style="height: 100px; width: 100px;" src="httppg"/>
</span>
</td>
<td>
<span>
<img style="height: 100px; width: 100px;" src="httjpg"/>
</span>
</td>
<td>
<span>
<img style="height: 100px; width: 100px;" src="http_u0pr.jpg"/>
</span>
</td>
<td>
<span>
<img style="height: 100px; width: 100px;" src=" https3_s9t1.jpg"/>
</span>
</td>
</tr>
<tr>
<td>
<span>
<a href="https://www.smn.html?prh</a>
</span>
</td>
<td>
<span>
<a href="https://1">Nh</a>
</span>
</td>
<td>
<span>
<a href="https:2">Ng</a>
</span>
</td>
<td>
<span>
<a href="https999">Nt watch</a>
</span>
</td>
</tr>
</table>
</div>
<div id="submit" style="display: flex;">
<table align="center">
<form id="myForm" action="javascript:void(0)">
<tr>
<th>用户名:</th>
<th><input id="username" type="text" name="username"/></th>
</tr>
<tr>
<th>邮箱:</td>
<td><input id="email" type="email" name="email"/></td>
</tr>
<tr>
<th>密码:</td>
<td><input id="password" type="password" name="password"/></td>
</tr>
<tr>
<th>登录或注册:</td>
<td align="center"><input type="submit" value="登录"/><input id="RE" type="button" value="注册"/></td>
</tr>
</form>
</table>
</div>
<div id="Register" style="display: none;">
<table align="center">
<form id="RegisterForm" action="javascript:void(0)">
<tr>
<th>用户名:</th>
<th><input id="Rusername" type="text" name="username"/></th>
</tr>
<tr>
<th>邮箱:</td>
<td><input id="Remail" type="email" name="email"/></td>
</tr>
<tr>
<th>密码:</td>
<td><input id="Rpassword1" type="password" name="password"/></td>
</tr>
<tr>
<th>密码:</td>
<td><input id="Rpassword2" type="password" name="password"/></td>
</tr>
<tr>
<th>注册:</td>
<td align="center"><input type="submit" value="注册"/></td>
</tr>
<tr>
<th>后退:</td>
<td align="center"><input id="back" type="button" value="后退"/></td>
</tr>
</form>
</table>
</div>
</body>
</html>
