点击验证码无刷新重新加载验证码图片

最新推荐文章于 2022-05-19 10:50:20 发布

十一路客

最新推荐文章于 2022-05-19 10:50:20 发布

阅读量2.1k

点赞数

分类专栏： JS 文章标签： js 验证码

JS 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

点击验证码无刷新重新加载验证码图片

生成验证码图片的image.jsp：

     Java代码   
     
   
 <%@page contentType="image/jpeg;charset=utf-8"%>  
 <%@page import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" %>  
 <%@ page import="java.io.OutputStream" %>  
 <html>  
  <body>  
   <%!   
    Color getRandColor(int fc,int bc)  
    {  
     Random rd=new Random();  
     if(fc>255) fc=255;  
     if(bc>255) bc=255;  
     int red=fc+rd.nextInt(bc-fc);  
     int green=fc+rd.nextInt(bc-fc);  
     int blue=fc+rd.nextInt(bc-fc);  
     return new Color(red,green,blue);  
    }  
    %>  
    <%   
     Random r=new Random();  
     response.addHeader("Pragma","No-cache");  
     response.addHeader("Cache-Control","no-cache");  
     response.addDateHeader("expires",0);     
     int width=90;  
     int height=23;  
    BufferedImage pic=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);  
    Graphics gc=pic.getGraphics();  
    gc.setColor(getRandColor(200,250));  
    gc.fillRect(0,0,width,height);  
    String[] rNum ={"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f",  
       "g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w",  
       "x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N",  
       "O","P","Q","R","S","T","U","V","W","X","Y","Z"};  
    int[] style = {Font.PLAIN,Font.BOLD,Font.ITALIC,Font.PLAIN+Font.BOLD,  
      Font.BOLD+Font.ITALIC,Font.PLAIN+Font.ITALIC,Font.PLAIN+Font.BOLD+Font.ITALIC};  
    gc.setColor(Color.WHITE);  
    gc.drawLine(0,30,90,10);  
    gc.setColor(getRandColor(160,200));  
    for (int i=0;i<50;i++)      
    {  
     int x = r.nextInt(width);      
     int y = r.nextInt(height);      
     int xl = r.nextInt(10);      
     int yl = r.nextInt(10);      
     gc.drawLine(x,y,x+xl,y+yl);      
    }  
    gc.setColor(getRandColor(60,150));  
    String rt = "";  
    for(int i=0;i<4;i++){  
     String temp = rNum[r.nextInt(62)];  
     rt = rt+temp;  
     gc.setFont(new Font("Times New Roman",style[r.nextInt(7)],15));  
     gc.drawString(temp,5+i*15+r.nextInt(10),10+r.nextInt(10));  
    }  
    gc.dispose();  
    session.setAttribute("randNum",rt);     
    OutputStream os=response.getOutputStream();  
    ImageIO.write(pic,"JPEG",os);  
    System.out.println("当前验证码为:"+session.getAttribute("randNum"));  
    os.flush();  
    os.close();  
    os=null;  
    response.flushBuffer();  
    out.clear();  
    out = pageContext.pushBody();  
     %>  
  </body>  
 </html>  

实现无刷新重新加载步骤：

1.在需要使用验证码的网页文件头部加上js代码：

写道

2.然后再验证码图片里面写onclick呼出上面的函数重新加载：

写道

3.两个文件在同一目录下，点击图片即可实现验证码重新加载

参考：http://zhidao.baidu.com/question/97875728.html
http://www.itwis.com/html/programme/javascript/20080416/1296.html

十一路客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击验证码无刷新重新加载验证码图片

点击验证码无刷新重新加载验证码图片生成验证码图片的image.jsp：Java代码 @page contentType="image/jpeg;charset=utf-8"%> @page import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" %> impor
复制链接

扫一扫