使用servlet写一段登录页面和注册页面滑动式交换的javaweb代码
时间: 2023-03-31 07:00:40 浏览: 99
以下是使用servlet写的登录页面和注册页面滑动式交换的javaweb代码:
登录页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
margin: 50px auto;
width: 400px;
background-color: #fff;
border-radius: 5px;
box-shadow: 10px rgba(,,,.3);
padding: 20px;
position: relative;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 5px rgba(,,,.1);
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.slide {
position: absolute;
top: ;
left: ;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 10px rgba(,,,.3);
padding: 20px;
transform: translateX(100%);
transition: transform .3s ease-in-out;
}
.slide.active {
transform: translateX();
}
.btn-slide {
position: absolute;
top: 20px;
right: -50px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
box-shadow: 10px rgba(,,,.3);
transition: right .3s ease-in-out;
}
.btn-slide.active {
right: 20px;
}
</style>
</head>
<body>
<div class="container">
<form action="login" method="post">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="登录">
</form>
<div class="slide">
<form action="register" method="post">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="注册">
</form>
<button class="btn-slide"><</button>
</div>
<button class="btn-slide">></button>
</div>
<script>
var btnSlide = document.querySelectorAll('.btn-slide');
var slide = document.querySelectorAll('.slide');
btnSlide[].addEventListener('click', function() {
slide[].classList.remove('active');
btnSlide[].classList.remove('active');
slide[1].classList.add('active');
btnSlide[1].classList.add('active');
});
btnSlide[1].addEventListener('click', function() {
slide[1].classList.remove('active');
btnSlide[1].classList.remove('active');
slide[].classList.add('active');
btnSlide[].classList.add('active');
});
</script>
</body>
</html>
```
登录servlet代码:
```java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
if (username.equals("admin") && password.equals("admin")) {
response.sendRedirect("welcome.jsp");
} else {
response.sendRedirect("login.jsp");
}
}
}
```
注册servlet代码:
```java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
// 将用户名和密码保存到数据库中
response.sendRedirect("login.jsp");
}
}
```
以上就是使用servlet写的登录页面和注册页面滑动式交换的javaweb代码。
相关推荐
![](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)
![](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)