最简登录界面

最新推荐文章于 2022-06-01 12:12:40 发布

Y1309SIR

最新推荐文章于 2022-06-01 12:12:40 发布

阅读量287

点赞数

文章标签： JavaScript 登录界面

本文链接：https://blog.csdn.net/Y1309SIR/article/details/80739947

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
  <script src="../Jquery/jquery-3.3.1.js"></script>  
 /*不写jquery实现不了*/
<style type="text/css">
div{
width:30px;
padding:100px 0px 0px 0px;
margin: auto;
}

</style>
<script type="text/javascript">
function btn(){
	$('input[type="text"]').val('');
	alert("清除成功");

}

function check(){

	var boo = confirm('确定登录吗')
	if(boo){
   
	 if($("#username").val()=="") 
	   {
	     alert("账号不能为空");
	     return false;
	   }else  if($("#password").val()=="") {
		   alert("密码不能为空");
		   return false;
	   }else{
		   alert("登录成功")
	   }}else{
	        alert('取消成功')
	    }

}
</script>

</head>
<body>
<name>
<div>
<fieldset>
<legend>登录页面</legend>
<input type="text" id="username" value="账户名"><br>
<input type="text" id="password" value="密码"><br>
<input type="button" οnclick="btn()" value="清除">
<input type="button" οnclick="check()" value="登录">

</fieldset>
</name>
</div>
</body>
</html>