登录的html css js代码,包含两种 js 实现的动态交互效果包括表单的验证以及密码是否显示,其中若账号为dd,密码为dd则表示登录成功可以跳转到index.html
时间: 2024-03-24 17:36:29 浏览: 17
好的,以下是一个简单的登录界面的HTML、CSS和JS代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="login-form">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<span class="show-password" onclick="togglePasswordVisibility()">Show Password</span>
<button type="submit">Login</button>
</form>
</div>
<script src="script1.js"></script>
<script src="script2.js"></script>
</body>
</html>
```
CSS代码:
```css
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
.login-container {
background-color: #fff;
width: 400px;
margin: 100px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
form input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-size: 16px;
}
form button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #3e8e41;
}
.show-password {
display: inline-block;
margin-left: 10px;
font-size: 14px;
color: #666;
cursor: pointer;
}
```
JS代码1(表单验证):
```js
const form = document.getElementById('login-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
form.addEventListener('submit', e => {
e.preventDefault();
if (usernameInput.value.trim() === '') {
alert('Username is required');
} else if (passwordInput.value.trim() === '') {
alert('Password is required');
} else {
form.submit();
}
});
```
JS代码2(密码是否显示,登录成功跳转):
```js
const passwordInput = document.getElementById('password');
const showPasswordButton = document.querySelector('.show-password');
showPasswordButton.addEventListener('click', togglePasswordVisibility);
function togglePasswordVisibility() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
showPasswordButton.textContent = 'Hide Password';
} else {
passwordInput.type = 'password';
showPasswordButton.textContent = 'Show Password';
}
}
form.addEventListener('submit', e => {
e.preventDefault();
if (usernameInput.value === 'dd' && passwordInput.value === 'dd') {
window.location.href = 'index.html';
} else {
alert('Invalid username or password');
}
});
```
这里使用了两种不同的JS代码实现密码是否显示和登录成功跳转的功能。第一个JS代码实现了表单验证功能,当用户名和密码都不为空时才能提交表单。第二个JS代码实现了密码是否显示和登录成功跳转的功能。当用户点击“Show Password”按钮时,密码框的type属性会从“password”变为“text”,以显示密码;当用户提交表单时,如果用户名和密码分别为“dd”和“dd”,则会跳转到index.html页面,否则会提示“Invalid username or password”。