I. Introduction of the work

A login page made in my spare time has realized the functions of dynamic transparent input box, background image adaptive browser window, simulated login verification, verification error prompt and so on.

Main technology: HTML, CSS, jQuery

interface

Verification error

The error type and text are different. This section provides an example for the case that the user name and password are not entered

Second, the code part

Ps: Jquery plug-in is requiredClick on the official website to download

HTML JS code (login.html)

<! DOCTYPE html><html>
	
	<head>
		<meta charset="UTF-8">
		<title>Login screen</title>
		<link rel="stylesheet" type="text/css" href="css/login.css" />
	</head>

	<body>
		<p class="wel">Welcome to my personal website.</p>
		<! -- Login form -->
		<form class="login"  method="post">
			<h1>Login</h1>
			<input type="text" name="username" id="username" placeholder="Username"  autocomplete="off" />
			<input type="password" name="password" id="password" placeholder="Password"  />
			<! -- Validation error -->
			<div id="error"></div>
			<input type="button" name="sub" id="sub" value="Login" />
		</form>/* Less js code, no need to write a separate JS file */<script type="text/javascript" src="Js/jquery - 3.4.1 track. Js"></script>
		<script type="text/javascript">
			/ * * * * * * * * * * * * * * * * * * * local simulation login authentication * * * * * * * * * * * * * * * * * * * /
			$(".login #sub") [0].onclick = function() {
				var user = $(".login #username") [0].value; // Get the input value of username
				var pass = $(".login #password") [0].value; //// Obtain the input value of password
				if(user == '123' && pass == 123) {
					window.location.href = "https://www.baidu.com/";
				} else if(user == ' ' || pass == ' ') {$("#error").text("* Account number or password cannot be empty");
				} else{$("#error").text("* Incorrect account or password, please re-enter"); }}// Clear the error message when clicking the username and password input fields
			$(".login #username") [0].onclick = function() {$("#error").text(' ');
			}
			$(".login #password") [0].onclick = function() {$("#error").text(' ');
			}
		</script>
	</body>

</html>
Copy the code

CSS code (login.css)

html {
	height: 100%;
}

/* Background image style */
body {
	margin: 0;
	padding: 0; background-image: url(.. /images/bg.gif); background-size:100% 100%;
	}

/* Welcome to my personal website. Style * /
.wel {
	color: rgba(255.255.255.7.);
	font-size: 50px;
	text-align: center;
}

/* Login area style */
.login {
	width: 300px;
	padding: 10px 40px 5px 40px;
	top: 30%;
	left: 10%;
	background: rgba(255.255.255.2.);  /* Translucency */
	box-shadow: 15px 15px 25px rgba(255.255.255.. 5); /* Box shadow */
	border-radius: 50%;  Round / * * /
	text-align: center;
	position: fixed;  /* Fixed position */
}

/* Login font style */
.login h1 {
	color: rgba(255.255.255.7.);
	text-transform: uppercase;
	font-weight: 600;
}

/* Login input box style */
.login #username,
#password {
	border: 0;
	background: none;
	display: block;
	font-size: 18px;
	margin: 20px auto;
	text-align: center;
	border: 2px solid rgba(255.255.255.. 5);  /* Border property */
	padding: 14px 10px;
	width: 200px;
	outline: none;
	color: rgba(255.255.255.. 5);  /* Font color */
	border-radius: 24px;
	transform: 0.25s; /* Animation time */
}
/* When you click on the input box, the input box style */
.login #username:focus, #password:focus {
	width: 240px;	
}

/* Error prompt style */
.login #error {
	width: 100%;
	height: 20px;
	color: red;
}

/* login Login button style */
.login #sub {
	background: none;
	display: block;
	font-size: 18px;
	margin: 20px auto;
	text-align: center;
	border: 2px solid rgba(255.255.255.. 5);
	padding: 14px 30px;
	outline: none;
	color: rgba(255.255.255.. 5);
	border-radius: 24px;
	cursor: pointer;  /* When the cursor moves to the Login button, it becomes a small hand */
}

/* Mouse over the login button style */
.login #sub:hover {
	background-color: skyblue;
}
Copy the code