课程名称：三小时轻松掌握常用验证码制作

课程章节：第2章 随机字符串验证码

主讲老师：十方上下 

课程内容：

今天学习的内容包括：

•  什么是随机字符串验证码

• 使用java实现随机字符串验证码

• 升级及验证随机字符串验证码

• 使用jQuery实现随机字符串验证码

课程收获：

我的环境是 myeclipse 2020.5.18   javaee 6.0 jstl 1.21 tomcat 8.5

包   原生js 实现随机字符串验证码函数的封装

package com.pxy.cha01;import java.awt.BasicStroke;import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class NewCode */@WebServlet("/NewCode")public class NewCode extends HttpServlet {	//private static final long serialVersionUID = 1L;           /**     * @see HttpServlet#HttpServlet()     *///    public NewCode() {//        super();//        // TODO Auto-generated constructor stub//    }    private Random random=new Random();	private int width=80;//宽度	private int height=30;//高度	private int fontsize=12;	private String str="0123456789abcdef";	//生成最少4个随字符串	private String randCode(int len){		if(len<4) {			len=4;		}		//改变画布尺寸		width=5+fontsize*len;		String code="";		for (int i = 0; i < len; i++) {			code+=str.charAt(random.nextInt(str.length()));		}		return code;	}	//返回随机颜色的方法    private Color randColor(){			int r=random.nextInt(256);			int g=random.nextInt(256);			int b=random.nextInt(256);			return new Color(r,g,b);		}	    	/**	* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)	*/	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		this.doPost(request, response);		//1.创建画板		BufferedImage img=new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);		//2.创建画笔		Graphics2D pen=(Graphics2D)img.getGraphics();		//3.生成随机内容		//String code="1234";		String code=randCode(4);		request.getSession().setAttribute("valiCode", code);		//4.绘制内容		//4.1设置绘制区域		pen.fillRect(0, 0, width, height);		//4.2设置字体		pen.setFont(new Font("微软雅黑",Font.BOLD,fontsize));		//4.3按顺序逐个绘制字符		for (int i = 0; i <code.length(); i++) {			pen.setColor(randColor());			pen.drawString(code.charAt(i)+"", 5+i*fontsize,(fontsize+height)/2);		}		//4.4绘制噪音线		for (int i = 0; i < 2; i++) {			pen.setColor(randColor());			pen.setStroke(new BasicStroke(3));			pen.drawLine(random.nextInt(width/2),random.nextInt(height), random.nextInt(width),random.nextInt(height));		}		//5.存为图片并发送		ServletOutputStream out=response.getOutputStream();		ImageIO.write(img,"png", out);		out.flush();		out.close();			}		protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		//	}}


<script type="text/javascript">			var valicode;			function changeCode() {				var cvs = document.getElementById('cvs');				valicode = drawcode(cvs);			}			function valiCode() {						var code=document.getElementById("inCode").value;			   if(code.toLowerCase()==valicode.toLowerCase()){			   	return true;			   }else{			   				   	document.getElementById('err').innerHTML="输入的验证码错误";			   	changeCode();			   	return false;			   }				}						window.onload=changeCode;								</script>