首页 前端知识 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
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!