菜单 搜索
首页 前端知识 JavaScript用纯JS和HTML搭建一个带登录和注册的动态页面-----JavaScript

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

2024-05-29 10:05:26 前端知识 前端哥 616 729 我要收藏 
<!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>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/9974.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行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

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！