仅用html和js制作用户注册和登录页面和密码修改页面并且三个页面可以转换
时间: 2023-07-14 21:14:15 浏览: 49
好的,下面是一个简单的示例,仅供参考:
HTML代码(register.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<style>
/* 样式可以根据自己的需要进行修改 */
input {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>用户注册</h1>
<form>
<label>用户名:</label>
<input type="text" name="username" required>
<label>密码:</label>
<input type="password" name="password" required>
<label>确认密码:</label>
<input type="password" name="confirmPassword" required>
<button type="submit">注册</button>
</form>
<p>已有账号?<a href="login.html">点击登录</a></p>
</body>
</html>
```
HTML代码(login.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<style>
/* 样式可以根据自己的需要进行修改 */
input {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>用户登录</h1>
<form>
<label>用户名:</label>
<input type="text" name="username" required>
<label>密码:</label>
<input type="password" name="password" required>
<button type="submit">登录</button>
</form>
<p>没有账号?<a href="register.html">点击注册</a></p>
<p><a href="modify_password.html">修改密码</a></p>
</body>
</html>
```
HTML代码(modify_password.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
<style>
/* 样式可以根据自己的需要进行修改 */
input {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>修改密码</h1>
<form>
<label>旧密码:</label>
<input type="password" name="oldPassword" required>
<label>新密码:</label>
<input type="password" name="newPassword" required>
<label>确认新密码:</label>
<input type="password" name="confirmNewPassword" required>
<button type="submit">修改密码</button>
</form>
<p><a href="login.html">返回登录</a></p>
</body>
</html>
```
JS代码(用于切换页面):
```js
// 获取页面元素
const registerPage = document.querySelector('#register-page');
const loginPage = document.querySelector('#login-page');
const modifyPasswordPage = document.querySelector('#modify-password-page');
// 切换到注册页面
function goToRegister() {
registerPage.style.display = 'block';
loginPage.style.display = 'none';
modifyPasswordPage.style.display = 'none';
}
// 切换到登录页面
function goToLogin() {
registerPage.style.display = 'none';
loginPage.style.display = 'block';
modifyPasswordPage.style.display = 'none';
}
// 切换到修改密码页面
function goToModifyPassword() {
registerPage.style.display = 'none';
loginPage.style.display = 'none';
modifyPasswordPage.style.display = 'block';
}
```
在HTML代码中,我们分别创建了3个页面:用户注册页面、用户登录页面和密码修改页面,并设置了相应的表单元素(用户名、密码等)。在JS代码中,我们定义了3个函数,分别用于切换到对应的页面。我们可以在HTML代码中使用这些函数来实现页面切换,例如:
```html
<p>没有账号?<a href="#" onclick="goToRegister()">点击注册</a></p>
<p><a href="#" onclick="goToModifyPassword()">修改密码</a></p>
```
这样就可以实现用户注册、登录和密码修改页面的切换了。当然,这只是一个简单的示例,实际的代码可能会更复杂,需要根据具体的需求进行修改。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)