登录的html css js代码,包含两种 js 实现的动态交互效果包括表单的验证以及密码是否显示,其中设定若账号为dd,密码为dd则表示登录成功,用户点击登录可以跳转到indx.html,f否则便显示登录失败
时间: 2024-03-24 15:36:38 浏览: 8
好的,以下是登录页面的 HTML、CSS、JS 代码:
HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span class="show-password" onclick="showPassword()">Show Password</span>
<input type="button" value="Login" onclick="checkLogin()">
</form>
</div>
<script src="script1.js"></script>
<script src="script2.js"></script>
</body>
</html>
```
CSS 代码:
```css
.container {
margin: 100px auto;
width: 400px;
text-align: center;
}
h1 {
font-size: 32px;
margin-bottom: 50px;
}
form {
display: inline-block;
text-align: left;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
font-size: 16px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.show-password {
display: block;
margin-top: 10px;
cursor: pointer;
color: blue;
}
input[type="button"] {
display: block;
margin: 50px auto 0;
padding: 10px 20px;
font-size: 18px;
color: #fff;
background-color: blue;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
cursor: pointer;
}
input[type="button"]:hover {
background-color: #0066cc;
}
```
第一个 JS 文件的代码(用于表单的验证):
```js
function checkLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
alert("Username and password can't be empty!");
return;
}
if (username == "dd" && password == "dd") {
alert("Login Success!");
window.location.href = "index.html";
} else {
alert("Login Failed!");
}
}
```
第二个 JS 文件的代码(用于密码的显示与隐藏):
```js
function showPassword() {
var passwordInput = document.getElementById("password");
var showPassword = document.getElementsByClassName("show-password")[0];
if (passwordInput.type == "password") {
passwordInput.type = "text";
showPassword.innerHTML = "Hide Password";
} else {
passwordInput.type = "password";
showPassword.innerHTML = "Show Password";
}
}
```
这样,一个简单的登录页面就做好了,其中包含了表单的验证、密码的显示与隐藏等交互效果。