JavaScript用纯JS和HTML搭建一个带登录和注册的动态页面-----JavaScript

水深无声 2024-02-19 10:01 9阅读 0赞

>     <!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>
> 
> <!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>