JAVA --- Ecriture de code de vérification simple | js + html se rend compte de changer un code de vérification | Vous ne voyez pas clairement? Changer un

Comment écrire un simple code de vérification?

@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());
    }

Comment utiliser le code de vérification écrit?


Exigences: cliquez sur l'image du code de vérification ou sur le lien hypertexte sur la page pour remplacer le code de vérification généré aléatoirement


Environnement: 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>

CONSEILS:
1. Le rôle de l'horodatage: Le navigateur a la fonction de mise en cache automatique, donc sans horodatage, l'attribut src de img ne peut pas être changé.Ajout d'un attribut qui doit être différent à chaque fois, l'heure est la plus appropriée. L'utilisation de propriétés de nombres aléatoires peut également être répétée, il est donc préférable d'utiliser un horodatage.
2. La raison pour laquelle l'attribut href du lien hypertexte n'est pas "" (vide) au début est que l'utilisation de vide provoquera l'actualisation de la page, puis les données précédemment remplies disparaîtront.


                                        感谢收阅      

Je suppose que tu aimes

Origine blog.csdn.net/Forest_2Cat/article/details/107797081
conseillé
Classement