用HTML/JScript/CSS做一个简单的登录界面

huaxihao

已于 2022-07-12 17:41:49 修改

阅读量393

点赞数 1

文章标签： html css javascript

于 2022-07-12 17:39:34 首次发布

本文链接：https://blog.csdn.net/huaxihao/article/details/125747765

版权

上代码

<!DOCTYPE html>
<!--定义为HTML5文档-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<!--编码设置为UTF-8,防止中文出现乱码-->
<title>登录</title> 
</head>
<body>
<!--定义CSS-->
<style> 
body {
	background-color:#d0e4fe;
    /*背景颜色为浅蓝色*/
}
p{
	color:orange;
	text-align:center;
    /*文字居中，颜色为橙色*/
}
h2{
	color:orange;
	text-align:center;
    /*标题居中，颜色为橙色*/
}
input{
	color:green;
	text-align:center;
    /*输入的文字居中，颜色为绿色*/
}
button{
	color:red;
	text-align:center;
    /*按钮居中，颜色为红色*/
}
p input{
    width:300px;
    height:30px;
    /*输入框居中，宽300px，高20px*/
}
</style>
<div style="text-align: center;line-height: 500px;"></div>
<!--定义按钮居中-->
<h2>账号：</h2><p>
<input id="demo" type="text"></p>
<!--账号输入框-->
<h2>密码：</h2>
<p><input id="passwd" type="password"></p>
<!--密码输入框-->
<!--定义js-->
<script>
function myFunction()
//定义一个函数
{
 	var x=document.getElementById("demo").value; 
    //获取账号值
    var y=document.getElementById("passwd").value;  
    //获取密码值
    if(x!="username1"&&x!="username2")  
    //如果账号不存在
	{
		alert("没有此账号！");
	}
    else{  //否则
        if(x=="username1"){  
        //如果账号是第一名用户
            if(y!="userpasswd1"){ 
            //如果密码不正确
                alert("密码错误");
            }
            else{  
            //否则
                window.open("userlink1");  
            }
        }
        if(x=="username2"){  
        //如果账号是第2名用户
            if(y!="userpasswd2"){  
            //如果密码不正确
                alert("密码错误");
            }
            else{  
            //否则
                window.open("userlink2");
            }
        }
    }
}
</script>
<br \="">
<br \="">
<p>
<button type="button" onclick="myFunction()" style="height:50px;width:100px;">登录</button>
<!--登录按钮-->
</p>
</body>
</html>

完成后，将后缀名改为*.html/*.htm（没有区别）

注意！！！

将刚才代码中所有username1改为第一个用户的账号名

将所有username2改为第2个用户的账号名

将所有userpasswd1改为第一个用户的密码

将所有userpasswd2改为第2个用户的密码

将所有userlink1改为第一个用户账号密码正确后跳转到的网页

将所有userlink2改为第2个用户账号密码正确后跳转到的网页