这次我们来做一个经常做注册页面的时候需要用到验证码：
1，我们会点击右边的看不清，更换一张，然后就换了一张
2，验证码的样式
package cn.liurui.web.yanzhengma;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/checkcodedemo01")
public class checkcodedemo01 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//服务器通知浏览器不要缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0");
//在内存中创建一个长80，宽30的图片，默认黑色背景
//参数一：长
//参数二：宽
//参数三：颜色
int width = 180;
int height = 50;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取画笔
Graphics g = image.getGraphics();
//设置画笔颜色为灰色
g.setColor(Color.GRAY);
//填充背景色
g.fillRect(0,0, width,height);
//产生4个随机验证码，12Ey
String checkCode = getCheckCode();
//将验证码放入HttpSession中
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
//设置画笔颜色为黄色
g.setColor(Color.YELLOW);
//设置字体的小大
g.setFont(new Font("黑体",Font.BOLD,24));
//向图片上写入验证码
g.drawString(checkCode,15,25);
//将内存中的图片输出到浏览器
//参数一：图片对象
//参数二：图片的格式，如PNG,JPG,GIF
//参数三：图片输出到哪里去
ImageIO.write(image,"PNG",response.getOutputStream());
}
/**
* 产生4位随机字符串
*/
private String getCheckCode() {
String base = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
int size = base.length();
Random r = new Random();
StringBuffer sb = new StringBuffer();
for(int i=1;i<=4;i++){
//产生0到size-1的随机值
int index = r.nextInt(size);
//在base字符串中获取下标为index的字符
char c = base.charAt(index);
//将c放入到StringBuffer中去
sb.append(c);
}
return sb.toString();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
我们可以新建一个表单来看看我们是否实现了这个功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<script>
window.onload=function () {
$("#changde").click(function () {
var date=new Date().getTime();
src="/day02web_lianxi/checkcodedemo01"+date;
});
}
</script>
</head>
<body>
<form action="/day02web_lianxi/checkcodedemo01"method="post">
用户名：<input type="text" name="username"placeholder="请输入用户名"><br>
密码：<input type="password" name="password"placeholder="请输入密码"><br>
<input type="checkbox"name="hobby" value="qian">钱
<input type="checkbox"name="hobby" value="meinv">美女
<input type="checkbox"name="hobby" value="haoche">豪车<br>
<input type="text"placeholder="请输入验证码">
<img id="checkcode" src="/day02web_lianxi/checkcodedemo01" alt="">
<a id="changde" href="">看不清，请换一张？</a><br>
<input type="submit"value="登录">
</form>
</body>
</html>
大家可以试下：代码的步骤我都加有注释，希望对你有所帮助！谢谢