验证码的理解
本质:一张点击可以切换的图片
目的:防止恶意表单注册
需求:
- 生成一张验证码图片
- 要求点击验证码图片自动切换
- 点击图片旁边链接"看不清点击此处换一张",图片切换
简单实现
生成验证码图片代码,创建一个Servlet,在里面加上下面这一段画图的代码
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int width=100;
int height=50;
//1. 创建一个对象,在内存中代表这个验证码图片
BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//2. 美化这个图片
//2.1 填充背景色
Graphics graphics = image.getGraphics();// 画笔对象
graphics.setColor(Color.pink);
graphics.fillRect(0,0,width,height);
//2.2 画边框
graphics.setColor(Color.blue);
graphics.drawRect(0,0,width-1,height-1);
//2.3 生成随机字符
String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
//生成随机脚标
Random ran=new Random();
for (int i = 1; i <=4 ; i++) {
int index = ran.nextInt(str.length());
//获取字符
char ch=str.charAt(index);//随机字符
//2.4写验证码
graphics.drawString(ch+"",width/5*i,height/2);
}
//2.5画干扰线
graphics.setColor(Color.gray);
for (int i = 1; i <=10 ; i++) {
//随机生成坐标点
int x1 = ran.nextInt(width);
int y1 = ran.nextInt(height);
int x2 = ran.nextInt(width);
int y2 = ran.nextInt(height);
graphics.drawLine(x1,y1,x2,y2);
}
//3. 将图片输出到页面展示
ImageIO.write(image,"jpg",response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
那么在页面中,创建一个img标签和一个a超链接,值为"看不清点击此处换一张",使其src指向上面这个Servlet路径,但是这样还不够,还应该对img标签和a标签获取onclick事件,对每一次点击使得img.src等于上面的这个Servlet路径+时间戳,这样就可以做到点击这个图片和超链接就可以切换,每一次图片不相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码</title>
<script>
/*
分析:
点击超链接或者图片,需要换一张
1. 给超链接和图片绑定单击事件
2. 重新设置图片的src属性值
*/
window.onload=function () {
//1. 获取图片对象
var img=document.getElementById("checkCode");
img.onclick=function () {
//加时间戳
var date=new Date().getTime();
img.src="/day15/checkCodeServlet?"+date;
}
var not_clear=document.getElementById("not_clear");
not_clear.onclick=function () {
//加时间戳
var date=new Date().getTime();
img.src="/day15/checkCodeServlet?"+date;
}
}
</script>
</head>
<body>
<img id="checkCode" src="/day15/checkCodeServlet"/>
<a id="not_clear">看不清?点击此处换一张</a>
</body>
</html>
验证码效果