设计一个小程序用户登录界面,在界面上输入用户名、密码,还布局有登录按钮和选择保存密码,当选择了保存密码,点击登录后就可以保存用户名和密码,下次运行时用户名与密码就会自动填入。当保存密码成功时,在调试器Console面板输出保存成功提示信息。
时间: 2023-11-19 09:05:26 浏览: 32
以下是一个简单的HTML/CSS/JS代码示例,实现了用户登录界面和保存密码功能:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Login</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
#login-box {
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0px 0px 10px #ccc;
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
label {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="login-box">
<h1>User 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">
<label for="remember-me">
<input type="checkbox" id="remember-me" name="remember-me"> Remember me
</label>
<input type="submit" id="login-button" value="Login">
</form>
</div>
<script src="login.js"></script>
</body>
</html>
```
JS代码:
```
// 获取页面元素
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const rememberMeCheckbox = document.getElementById('remember-me');
const loginButton = document.getElementById('login-button');
// 检查是否保存了密码
if (localStorage.getItem('username') && localStorage.getItem('password')) {
usernameInput.value = localStorage.getItem('username');
passwordInput.value = localStorage.getItem('password');
rememberMeCheckbox.checked = true;
}
// 点击登录按钮时执行的函数
function login() {
const username = usernameInput.value;
const password = passwordInput.value;
// TODO: 实现登录逻辑
// 保存密码逻辑
if (rememberMeCheckbox.checked) {
localStorage.setItem('username', username);
localStorage.setItem('password', password);
console.log('Password saved successfully!');
} else {
localStorage.removeItem('username');
localStorage.removeItem('password');
}
}
// 绑定事件
loginButton.addEventListener('click', login);
```
上述代码使用了localStorage来保存用户名和密码,每次加载页面时会检查localStorage中是否已经保存了密码,如果有则自动填充到用户名和密码输入框中。当用户勾选了“Remember me”选项并点击登录按钮时,就会将用户名和密码保存到localStorage中。保存成功后,会在浏览器的调试器Console面板输出“Password saved successfully!”的提示信息。