jsp界面显示一个成功信息2秒
时间: 2023-08-02 08:26:59 浏览: 42
您可以使用以下代码在 JSP 页面中显示一个成功信息两秒钟:
```jsp
<%-- 在页面中添加以下内容 --%>
<div id="success-message">操作成功!</div>
<%-- 在页面底部添加以下 JavaScript 代码 --%>
<script>
// 2秒后隐藏成功消息
setTimeout(function() {
document.getElementById("success-message").style.display = "none";
}, 2000);
</script>
```
此代码将在页面中显示一个 ID 为 "success-message" 的 DIV 元素,其中包含成功信息。然后使用 JavaScript setTimeout() 函数在2秒后将该元素的 display 样式设置为 "none",从而将其隐藏。
相关问题
用jsp写一个登录效验的界面
好的,我可以为您提供关于用JSP编写登录验证界面的建议和指导。首先,您需要创建一个JSP页面,该页面将包含一个表单,用户可以在该表单中输入其登录凭据。然后,您可以使用Java代码来验证用户的登录信息,并根据验证结果返回不同的响应。
以下是一些开发登录界面的基本步骤:
1. 创建一个JSP页面,该页面包含一个表单,用户可以在该表单中输入其登录凭据。
2. 在JSP页面中添加一个目标为“login”(或您选择的其他名称)的表单动作,该动作将提交用户的登录凭据。
3. 创建一个Servlet或Java类,用于处理登录请求。您可以使用Java代码验证用户的登录凭据,并根据验证结果返回不同的响应。
4. 在Java类中,您可以使用request.getParameter("username")和request.getParameter("password")来获取用户在表单中输入的登录凭据。
5. 然后,您可以编写您自己的代码来验证登录凭据,例如通过检查数据库中的用户名和密码是否匹配。
6. 如果验证成功,则可以将用户重定向到应用程序的主页或其他目标页面。
7. 如果验证失败,则可以向用户显示错误消息并返回登录页面。
当然,登录验证可能涉及到很多其他的复杂问题,例如安全性,密码哈希和加密等。如果您需要更多的帮助和指导,请告诉我。
使用jsp完成一个带有样式的登陆界面
好的,我可以给你提供一个基于JSP(Java Server Pages)的带有样式的登陆界面的示例代码,供你参考。
首先,我们需要一个JSP页面,名为 `login.jsp`。以下是该页面的代码:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login Form</h2>
<form action="loginAction.jsp" method="post">
<div class="user-box">
<input type="text" name="username" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
```
在这个页面中,我们使用了一个名为 `login-box` 的 `div` 元素来包裹登陆表单,并在其中添加了一个 `h2` 元素来显示标题。我们还添加了两个输入框,分别用于输入用户名和密码,并使用了 `label` 元素来标记它们。最后,我们添加了一个 `button` 元素用于提交表单,并将表单的 `action` 属性设置为 `loginAction.jsp`,即当用户提交表单时,将会跳转到名为 `loginAction.jsp` 的页面进行处理。
接下来,我们需要一个名为 `loginAction.jsp` 的JSP页面,它将用于处理登陆表单的提交。以下是该页面的代码:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
if(username.equals("admin") && password.equals("123456")){
response.sendRedirect("welcome.jsp");
} else {
%>
<!DOCTYPE html>
<html>
<head>
<title>Login Failed</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login Failed</h2>
<p>Incorrect username or password. Please try again.</p>
<form action="loginAction.jsp" method="post">
<div class="user-box">
<input type="text" name="username" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
<%
}
%>
```
在该页面中,我们首先使用 `request.getParameter()` 方法获取到用户名和密码,并进行简单的验证。如果用户名和密码都正确,我们使用 `response.sendRedirect()` 方法将用户重定向到名为 `welcome.jsp` 的欢迎页面。如果用户名或密码不正确,我们将显示一个错误消息,并重新显示登陆表单供用户重新输入。在这个页面中,我们使用了与 `login.jsp` 相同的HTML和CSS样式。
最后,我们需要一个名为 `welcome.jsp` 的JSP页面,它将用于显示登陆成功的欢迎消息。以下是该页面的代码:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Welcome</h2>
<p>You have successfully logged in.</p>
</div>
</body>
</html>
```
在这个页面中,我们只是简单地显示了一个欢迎消息,通知用户已经成功登陆。同样,我们也使用了与 `login.jsp` 和 `loginAction.jsp` 相同的HTML和CSS样式。
最后,我们需要一个名为 `style.css` 的CSS文件,用于定义我们的登陆界面的样式。以下是该文件的代码:
```css
body {
margin: 0;
padding: 0;
background: #333;
font-family: sans-serif;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
}
h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.user-box {
position: relative;
}
.user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: 0.5s;
}
.user-box input:focus ~ label, .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #03a9f4;
font-size: 12px;
}
button[type="submit"] {
display: block;
background: #03a9f4;
color: #fff;
text-transform: uppercase;
padding: 12px 30px;
margin-top: 40px;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
border-radius: 25px;
transition: 0.5s;
border: none;
outline: none;
cursor: pointer;
}
button[type="submit"]:hover {
background: #fff;
color: #03a9f4;
}
```
在这个CSS文件中,我们定义了登陆界面的样式,包括背景颜色、字体、输入框和按钮的样式等。
希望这个示例对你有所帮助。