点击验证码更换下一张

效果展示

在这里插入图片描述

点击验证码更换下一张
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function () {
            // 1. 获取图片
            var changeImg = document.getElementById("changeImg");
            // 2. 绑定单击事件
            changeImg.onclick = function () {
                // 修改图片的src属性
                /*
                因为浏览器会对图片进行缓存,所以如果我们还是使用/day15/checkCodeServlet请求地址
                那么浏览器会把缓存中的图片返回给我们,而这不是我们想要的。
                所以我们需要在请求地址后面加上一个参数,这样浏览器一看是新的请求地址,就会向服务器发起请求,返回新的图片

                还有就是我们设置的这个参数不能重复,如果重复了,浏览器一看请求地址和之前的一样,还是会返回缓存中的图片
                那么怎样使图片不重复呢?
                    random随机生成,也会生成重复的数据,所以不可取
                    我们可以使用当前时间的毫秒值来作为参数,因为时间是不会重复的,光阴一去不复反呐
                 */
                var date = new Date().getTime();
                changeImg.src = "/day15/checkCodeServlet?" + date;  // 修改图片的src属性,并加上一个不会重复的参数
            };


            // 获取a标签
            var change = document.getElementById("change");
            // 绑定单击事件
            change.onclick = function () {
                var date = new Date().getTime();
                changeImg.src = "/day15/checkCodeServlet?" + date;
            };

        }
    </script>
</head>
<body>
    <img id="changeImg" src="/day15/checkCodeServlet">
    <a href="#" id="change">看不清换一张</a>
</body>
</html>
生成字符验证码
package cn.itcast.response;

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("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 创建一个图片对象
        int width = 100;
        int height = 50;                        // 宽        高                   类型为RGB
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);


        // 2. 美化图片
        // 获取画笔对象
        Graphics graphics = image.getGraphics();

        // 设置画笔颜色,然后使用该颜色填充背景
        graphics.setColor(Color.PINK);
        graphics.fillRect(0, 0, width, height); // 起点坐标 填充的宽度  填充的高度

        // 设置画笔颜色,然后使用该颜色画边框
        graphics.setColor(Color.BLUE);
        graphics.drawRect(0, 0, width-1, height-1); // 起点坐标 边框的宽度 边框的高度   由于边框本身也会占1个像素,所以需要把边框总长度减1

        // 画验证码
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        Random random = new Random();
        // 生成4位随机字符,并将字符画到图片上
        for (int i = 1; i <=4 ; i++) {
            // 生成随机索引
            int index = random.nextInt(str.length());
            // 获取随机字符
            char charAt = str.charAt(index);
            // drawString方法可以将字符串画到图片上
            graphics.drawString(charAt + "", width/5*i, height/2);
                                // 随机字符         随机x坐标       随机y坐标
        }

        // 画干扰线
        graphics.setColor(Color.GREEN);
        // 生成10条随机干扰线,并将干扰线画到图片上
        for (int i = 0; i <= 10 ; i++) {
            // 生成随机干扰线坐标
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int x2 = random.nextInt(width);
            int y2 = random.nextInt(height);
            // drawLine方法可以将线画到图片上
            graphics.drawLine(x1, y1, x2, y2);
        }


        // 3. 将图片输出到页面展示
        // 使用ImageIO的write方法将图片输出到页面
        ImageIO.write(image, "jpg", response.getOutputStream());
                    // 图片对象         图片后缀名       输出流对象
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

你可能感兴趣的:(点击验证码更换下一张,Java)