动态验证码

最新推荐文章于 2024-08-12 22:28:07 发布

秃头的吴彦祖

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量96

点赞数

分类专栏：功能案例文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Xstruggle/article/details/125365311

版权

功能案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Java创建包含随机数字的验证码图片，并在HTML中展示。通过Graphics对象绘制矩形、填充颜色、写字及画线，生成了包含四个随机数字的验证码。同时，HTML部分展示了输入验证码的文本框、图片以及刷新验证码的功能，利用JavaScript更新图片URL以防止缓存。

摘要由CSDN通过智能技术生成

java

// 创建图片对象
BufferedImage bi = new BufferedImage(100, 30, BufferedImage.TYPE_INT_RGB);
// 画图(画笔)
Graphics g = bi.getGraphics();
// 形状颜色
g.setColor(Color.PINK);
// 图片形状（长方体）
g.fillRect(0,0,100,30);
// 画笔颜色
g.setColor(Color.WHITE);
// 随机组合（数字&字母）
int i1 = (int)(Math.random()*20);
// 给图片填字
g.drawString(i1+"",20,15);
// 随机组合（数字&字母）
int i2 = (int)(Math.random()*20);
// 给图片填字
g.drawString(i2+"",40,20);
// 随机组合（数字&字母）
int i3 = (int)(Math.random()*20);
// 给图片填字
g.drawString(i3+"",60,15);
// 随机组合（数字&字母）
int i4 = (int)(Math.random()*20);
// 给图片填字
g.drawString(i4+"",80,20);
// 线条颜色
g.setColor(Color.YELLOW);
// 画线
g.drawLine(0,0,100,30);
ImageIO.write(bi,"jpg",resp.getOutputStream());

html

<body>
<input id="captcha" placeholder="验证码" type="text"/>
<img src=""/>
<button>注册</button>
<script charset="utf-8" src="jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("img").attr("src", "../captcha?date=" + new Date());
    });

    $("img").on("click", function () {
        $("img").attr("src", "../captcha?date=" + new Date());
    });
</script>
</body>