验证码的制作

来源：互联网发布：2017唱歌比赛网络报名编辑：程序博客网时间：2024/04/29 11:48

编写jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>
<%@ page import="java.util.Random"%>
<%@ page import="java.io.OutputStream"%>
<%@ page import="java.awt.Color"%>
<%@ page import="java.awt.Font"%>
<%@ page import="java.awt.Graphics"%>
<%@ page import="java.awt.image.BufferedImage"%>
<%@ page import="javax.imageio.ImageIO"%>
<%
int width = 60;
int height = 32;
//create the image
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
// set the background color
g.setColor(new Color(0xDCDCDC));
g.fillRect(0, 0, width, height);
// draw the border
g.setColor(Color.black);
g.drawRect(0, 0, width - 1, height - 1);
// create a random instance to generate the codes
Random rdm = new Random();
String hash1 = Integer.toHexString(rdm.nextInt());
System.out.print(hash1);
// make some confusion
for (int i = 0; i < 50; i++) {
int x = rdm.nextInt(width);
int y = rdm.nextInt(height);
g.drawOval(x, y, 0, 0);
}
// generate a random code
String capstr = hash1.substring(0, 4);
//将生成的验证码存入session
session.setAttribute("validateCode", capstr);
g.setColor(new Color(0, 100, 0));
g.setFont(new Font("Candara", Font.BOLD, 24));
g.drawString(capstr, 8, 24);
g.dispose();
//输出图片
response.setContentType("image/jpeg");
out.clear();
out = pageContext.pushBody();
OutputStream strm = response.getOutputStream();
ImageIO.write(image, "jpeg", strm);
strm.close();

然后将其引入到登录页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/jsp/tag.jsp"%>
<html>
<head>
<TITLE>药品采购平台</TITLE>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<LINK rel="stylesheet" type="text/css" href="${baseurl}styles/style.css">
<LINK rel="stylesheet" type="text/css" href="${baseurl}styles/login.css">
<LINK rel="stylesheet" type="text/css" href="${baseurl}js/easyui/themes/default/easyui.css">
<LINK rel="stylesheet" type="text/css" href="${baseurl}js/easyui/themes/icon.css">

<STYLE type="text/css">
.btnalink {
cursor: hand;
display: block;
width: 80px;
height: 29px;
float: left;
margin: 12px 28px 12px auto;
line-height: 30px;
background: url('${baseurl}images/login/btnbg.jpg') no-repeat;
font-size: 14px;
color: #fff;
font-weight: bold;
text-decoration: none;
}
</STYLE>
<%@ include file="/WEB-INF/jsp/common_js.jsp"%>

<script type="text/javascript">

//登录提示方法
function loginsubmit() {
$("#loginform").submit();

}

</SCRIPT>
</HEAD>
<BODY style="background: #f6fdff url(${baseurl}images/login/bg1.jpg) repeat-x;">
<FORM id="loginform" name="loginform" action="${baseurl}login.action"
method="post">
<DIV class="logincon">

<DIV class="title">
<IMG alt="" src="${baseurl}images/login/logo.png">
</DIV>

<DIV class="cen_con">
<IMG alt="" src="${baseurl}images/login/bg2.png">
</DIV>

<DIV class="tab_con">

<input type="password" style="display:none;" />
<TABLE class="tab" border="0" cellSpacing="6" cellPadding="8">
<TBODY>
<TR>
<TD>用户名：</TD>
<TD colSpan="2"><input type="text" id="usercode"
name="username" style="WIDTH: 130px" /></TD>
</TR>
<TR>
<TD>密码：</TD>
<TD><input type="password" id="pwd" name="password" style="WIDTH: 130px" />
</TD>
</TR>
<TR>
<TD>验证码：</TD>
<TD><input id="randomcode" name="randomcode" size="8" /> <img
id="randomcode_img" src="${baseurl}validatecode.jsp" alt=""
width="56" height="20" align='absMiddle' /> <a
href=javascript:randomcode_refresh()>刷新</a></TD>
</TR>
<tr>
<TD></TD>
<td><input type="checkbox" name="rememberMe" />自动登陆</td>
</tr>

<TR>
<TD colSpan="2" align="center"><input type="button"
class="btnalink" onclick="loginsubmit()" value="登  录" />
<input type="reset" class="btnalink" value="重  置" /></TD>
</TR>
</TBODY>
</TABLE>

</DIV>
</DIV>
</FORM>
</BODY>
</HTML>

阅读全文

0 0