JAVA --- Simple verification code writing|js+html realizes to change a verification code|Can't see clearly? Change one

How to write a simple verification code?

@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
            int width = 100;
            int height = 50;

        //创建图片对象
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

        //美化图片
        //1.填充背景色
        Graphics g = image.getGraphics(); //创建画笔对象
        g.setColor(Color.PINK);  //设置画笔颜色
        g.fillRect(0,0,width,height);  //从（0,0）点开始

        //2.画边框
        g.setColor(Color.BLACK);
        g.drawRect(0,0,width-1,height-1);

        //定义字符库
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqlstuvwxyz1234567890" ;

        //定义角标（即选中哪个字符）
        Random random = new Random();


        //选四个字符
        for(int i = 0; i < 4; i ++){
    
    
            int index = random.nextInt(str.length());
            char ch = str.charAt(index);  //charAt通过角标获取字符
            g.drawString(ch+"",width/5*(i+1),height/2);
        }

        //画干扰线
        g.setColor(Color.cyan);

        for(int x =0; x< 11; x++){
    
    
            int x1 = random.nextInt(width);
            int x2 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int y2 = random.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }



        //输出图片到页面
        ImageIO.write(image,"jpg",response.getOutputStream());
    }

How to use the written verification code?

Requirements: Click the verification code picture or hyperlink on the page to replace the randomly generated verification code

Environment: html+js

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //给超链接和图片绑定单击事件,并且重新设定图片src的值
        function reImg() {
     
     
            var img = document.getElementById("checkcode");
            //2.绑定单击事件
            //加时间戳
            var date = new Date().getTime();
            img.src = "/day15/CheckCodeServlet?" + date;
        }
    </script>
</head>
<body>
    <img οnclick="reImg()" id= "checkcode" src = "/day15/CheckCodeServlet" />
    <a href = "#" οnclick="reImg()"> 看不清?点此处换一张</a>
</body>
</html>

TIPS:
1. The role of timestamp: The browser has the function of automatic caching, so without a timestamp, the src attribute of img cannot be changed. Adding an attribute that must be different every time, the time is most suitable. The use of random number properties may also be repeated, so it is best to use a timestamp.
2. The reason why the href attribute of the hyperlink is not "" (empty) at the beginning is that using empty will cause the page to refresh, then the previously filled data will disappear.

                                        感谢收阅

JAVA --- Simple verification code writing|js+html realizes to change a verification code|Can't see clearly? Change one

Guess you like