<!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>
JavaScript用纯JS和HTML搭建一个带登录和注册的动态页面-----JavaScript
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9974.html
相关文章
-
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
-
前端提高篇(102):jQuery高级方法callbacks、deferred
-
解决npm install 报错 “npm err code 1“
-
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
-
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
-
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
-
JQuery中的load()、$
-
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
-
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
-
HTML/SSM-实验室预约管理系统-99299(免费领源码 开发文档)可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案
发布的文章
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
2024-08-27 09:08:17
前端提高篇(102):jQuery高级方法callbacks、deferred
2024-05-09 11:05:34
解决npm install 报错 “npm err code 1“
2024-06-06 10:06:47
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
2024-04-22 09:04:34
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
2024-03-29 15:03:20
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
2024-04-20 17:04:38
JQuery中的load()、$
2024-05-10 08:05:15
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
2024-10-30 21:10:12
大家推荐的文章