HTML+JavaScript 用户登录界面

最新推荐文章于 2024-07-27 11:58:54 发布

islittletan

最新推荐文章于 2024-07-27 11:58:54 发布

阅读量3.6w

点赞数 23

分类专栏： HTML/javascript 文章标签： javascript html 用户登录

本文链接：https://blog.csdn.net/qq776306395/article/details/23428687

版权

HTML/javascript 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

HTML+JavaScript 用户登录界面

主要功能：

1.简单的验证功能

2.登录画面始终显示在最中央

3.默认聚焦在输入框中。

代码如下：

<html>
<head>
    <title>登录界面</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
	    //窗体改变大小时触发事件
		window.onresize = setViewSize;
		var marginLeft=0;
		var marginTop=0;
		//设置画布大小，登录页面显示在屏幕最中间
		function setViewSize() {
			//计算屏幕大小
			var w=window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;
			var h=window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight;
			//设置登陆div的位置
			marginLeft = (w-468)/2;
			marginTop = (h-262)/2;
			document.getElementById("loginFormMain").style.marginLeft=marginLeft;
			document.getElementById("loginFormMain").style.marginTop=marginTop;
		}
		
		//默认聚焦在用户名输入框上
		function focusOnUsername() {
			//调整画布大小和登陆框位置
		    setViewSize();
			//默认聚焦在输入框上
			if (document.loginForm) {
				var usernameInput = document.loginForm.username;
				if (usernameInput) {
					usernameInput.focus();
				}
			}
			return;
		}
    
    	//检查用户输入
		function checkLogin(){
			if(checkUsername() && checkPassword()){
				 return true;
			 }		  
			return false;
		}
		//检查登录用户名
		function checkUsername(){
			var username = document.loginForm.username;
			if(username.value.length!=0){
				return true;
			}else{
				alert("请输入用户名");
				return false;
			}
		}
		//检查登录密码
		function checkPassword(){
			var password = document.loginForm.password;
			if(password.value.length!=0){
				return true;
			}else{
				alert("请输入密码");
				return false;
			}
		}
	</script>
</head>

<body bgcolor="#1E81C2" οnlοad="javascript:focusOnUsername();" >
	 <form  action="success.html" name="loginForm" >
	 <div  id="loginFormMain">
		 <table  style="width:468px;height:262px;background-color: gray;text-align: center;">
			  <tr>
			  	 <th colspan="2" align="center" >管理系统登录</th>
			  </tr>
			  <tr>
			      <td>用户名:<input type="text" style="width: 200px;height: 30px;"  name="username"></td>
			  </tr>
			  <tr>
			      <td>密  码:<input type="password"  style="width: 200px;height: 30px;"  name="password"></td>
			  </tr>
			  <tr>
			      <td align="center" ><input  formmethod="post" type="submit" style="cursor: pointer;font-style: inherit;" name="submit"  οnclick="return checkLogin();" value="登录" > 
			          <input type="reset"  style="cursor: pointer;" name=reset  value="重置"></td>
			  </tr>
		 </table>
	 </div>
	  </form>
</body>
</html>

运行效果: