一个简单的HTML5后台登陆界面及登录实现

最新推荐文章于 2024-06-26 00:11:45 发布

XiaoYuOuu

最新推荐文章于 2024-06-26 00:11:45 发布

阅读量8.3k

点赞数 8

文章标签： html5 后端 javascript

本文链接：https://blog.csdn.net/xiaoyuouu/article/details/120317758

版权

这个博客展示了如何创建一个简单的HTML5登录界面，界面包含固定管理员账号的登录功能。用户输入用户名和密码，点击登录按钮后，通过JavaScript进行验证。如果账号为'admin'且密码为'010615'，则弹出登陆成功提示并跳转到'zjm.html'；否则显示错误提示。

摘要由CSDN通过智能技术生成

一个简单的HTML5后台登陆界面及登录实现

可以实现固定管理员账号登陆的html登陆界面

1.实现效果图

登陆界面

2.代码实现

（包括HTML，css，js）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            form
            {
                width:100%;
                height:700px;
                 margin-top: 0px;
                background:#008B8B;
            }
            div
            {
                display:inline-block;
                padding-top: 80px;
                padding-right: 20px;
                
            }
            h2
            {
                font-family: "微软雅黑";
            font-size: 40px;
                color:black;
            }
            #log
            {
                color:blue;
            }
        </style>
    </head>
    <body>
        <form name="login">
            <center>
            <div>
            <h2>
                    合作岛后天管理系统
            </h2>
            <p>
                用户名：<input type="text" name="" id="0" value="" />
            </p>
            <p>
                密&emsp;码:<input type="password" name="" id="1" value="" />    
            </p>
            <p>
                <input type="button" name="" id="btn" value="登陆" />
            </p>
			<p>
				请输入管理员账号
			</p>
				
            
            </div>
            </center>
        </form>
    </body>
	
	<script type="text/javascript">
		var btn = 	document.getElementById("btn");
		var aInputs = document.getElementsByTagName('input')
		btn.onclick = function(){
			
        ;
        if (aInputs[0].value == "admin" && aInputs[1].value == "010615") {
                alert('登陆成功！');
				window.location.href='zjm.html';			         
            } else {
                alert('请填写正确的账号密码！');
            }
		}
		
    </script>
</html>

其中的图1 代码是登陆功能的实现

图1：
<script type="text/javascript">
		var btn = 	document.getElementById("btn");
		var aInputs = document.getElementsByTagName('input')
		btn.onclick = function(){
			
        ;
        if (aInputs[0].value == "admin" && aInputs[1].value == "010615") {
                alert('登陆成功！');
				window.location.href='zjm.html';			         
            } else {
                alert('请填写正确的账号密码！');
            }
		}
		
    </script>