基于JQ的登陆界面实现要求： 1姓名必须为你自己的名字如邓诗；2密码必须为你自己的学号如21100011；3点击提交后登陆状态必须为邓诗登陆成功！4背景颜色为蓝色登陆界面要有白色模板放置中间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆界面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
body{
background-color: #4a90e2;
}
.login{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
text-align: center;
}
input{
margin: 10px;
padding: 5px;
border-radius: 5px;
border: none;
outline: none;
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
button{
margin: 10px;
padding: 5px 10px;
border-radius: 5px;
border: none;
outline: none;
background-color: #4a90e2;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login">
<h1>登陆界面</h1>
<input type="text" id="name" placeholder="姓名">
<br>
<input type="password" id="password" placeholder="密码">
<br>
<button id="submit">提交</button>
<p id="status"></p>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var password = $("#password").val();
if(name=="邓诗" && password=="21100011"){
$("#status").text(name+",登陆成功！");
}else{
$("#status").text("登陆失败，请检查姓名和密码是否正确！");
}
});
});
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/fJG7 著作权归作者所有。请勿转载和采集!