用javascript编写一个用户注册界面。 实现用户登录功能
时间: 2024-03-05 14:51:51 浏览: 32
好的,我可以提供一些简单的代码示例。首先,我们需要一个包含用户名和密码输入框的注册界面。
HTML:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="注册">
</form>
```
接下来,我们需要使用 JavaScript 来获取用户输入的值,并将其存储在本地存储中。我们还需要实现一个简单的用户登录功能。
JavaScript:
```javascript
// 获取表单元素
const form = document.querySelector('form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
// 当表单提交时,保存用户信息
form.addEventListener('submit', (e) => {
e.preventDefault();
const username = usernameInput.value;
const password = passwordInput.value;
localStorage.setItem('username', username);
localStorage.setItem('password', password);
alert('注册成功!');
});
// 用户登录
const login = () => {
const storedUsername = localStorage.getItem('username');
const storedPassword = localStorage.getItem('password');
const username = prompt('请输入用户名:');
const password = prompt('请输入密码:');
if (username === storedUsername && password === storedPassword) {
alert('登录成功!');
} else {
alert('用户名或密码错误!');
}
};
// 绑定登录按钮点击事件
const loginBtn = document.querySelector('#loginBtn');
loginBtn.addEventListener('click', login);
```
这样,我们就实现了一个简单的用户注册和登录功能。当用户注册时,它们的用户名和密码将会保存在本地存储中。当用户登录时,它们输入的用户名和密码将会与本地存储中的值进行比较,如果匹配成功,则表示登录成功。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)