登录的html css js代码,至少包含两种 js 实现的动态交互效果
时间: 2023-11-24 09:05:22 浏览: 29
以下是一个简单的登录页面的 HTML、CSS 和 JavaScript 代码,包括两种不同的 JavaScript 实现的动态交互效果:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>登录</h1>
<form id="login-form" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登录">
</form>
<div id="message"></div>
<button id="toggle-password-visibility">显示密码</button>
</div>
<script src="script1.js"></script>
<script src="script2.js"></script>
</body>
</html>
```
CSS 代码:
```
.container {
margin: 0 auto;
width: 400px;
}
h1 {
text-align: center;
}
label {
display: block;
margin-top: 20px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
display: block;
margin-top: 20px;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
#message {
margin-top: 20px;
padding: 10px;
background-color: #f44336;
color: #fff;
display: none;
}
#toggle-password-visibility {
margin-top: 20px;
padding: 10px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
```
JavaScript 代码(实现动态交互效果1):
```
const form = document.getElementById("login-form");
const message = document.getElementById("message");
form.addEventListener("submit", function(event) {
event.preventDefault();
message.textContent = "正在登录,请稍等...";
message.style.display = "block";
setTimeout(function() {
message.textContent = "登录失败,请检查用户名和密码是否正确。";
message.style.backgroundColor = "#f44336";
}, 2000);
});
```
这段代码中,我们使用了 JavaScript 的 setTimeout() 函数来模拟登录过程需要一定的时间。当用户点击登录按钮时,我们设置 message 的文字为“正在登录,请稍等...”,并将其显示出来。然后,我们使用 setTimeout() 函数延迟2秒后再改变 message 的文字为“登录失败,请检查用户名和密码是否正确。”,并将其背景颜色改为红色,表示登录失败。
JavaScript 代码(实现动态交互效果2):
```
const toggleButton = document.getElementById("toggle-password-visibility");
const passwordInput = document.getElementById("password");
toggleButton.addEventListener("click", function() {
if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleButton.textContent = "隐藏密码";
} else {
passwordInput.type = "password";
toggleButton.textContent = "显示密码";
}
});
```
这段代码中,我们使用了 JavaScript 的事件监听器来监听 toggleButton 的 click 事件。当用户点击 toggleButton 时,我们判断 passwordInput 的 type 属性是否为“password”。如果是的话,我们将其改为“text”,表示显示密码,并将 toggleButton 的文字改为“隐藏密码”。如果不是的话,我们将其改为“password”,表示隐藏密码,并将 toggleButton 的文字改为“显示密码”。这样就可以方便用户在输入密码时选择是否显示密码。