每分钟对登录界面的验证码进行自动刷新。
js代码:
//输入验证码文本框:
<div style="text-align: center;" class="verificationCode-panel">
<input id="codeText" class="form-focus" placeholder=" 请输入验证码"/>
<img class="verificationCode" src="/verificationCode/getVerificationCode?_="+(new Date()).getTime() />
</div>
//绑定点击事件:点击进行刷新
$('.verificationCode').click(function () {
$(this).attr('src','/verificationCode/getVerificationCode?_='+(new Date()).getTime());
});
//每分钟自动更新相当于每分钟点击一次
function timeFunction(){
$('.verificationCode').click();
}
//页面加载时会进行刷新
window.onload =function () {
$('.verificationCode').click();
setInterval(timeFunction, 60000);//每分钟自动更新一次验证码
}
java代码:
//生成验证码:
@RequestMapping("/verificationCode/getVerificationCode")
public void getVerificationCode(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置不缓存图片
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
// 指定生成的响应图片,一定不能缺少这句话,否则错误.
response.setContentType("image/jpeg");
int width = 86, height = 22; // 指定生成验证码的宽度和高度
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 创建BufferedImage对象,其作用相当于一图片
Graphics g = image.getGraphics(); // 创建Graphics对象,其作用相当于画笔
Graphics2D g2d = (Graphics2D) g; // 创建Grapchics2D对象
Random random = new Random();
Font mfont = new Font("微软雅黑", Font.CENTER_BASELINE, 17); // 定义字体样式
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height); // 绘制背景
g.setFont(mfont); // 设置字体
g.setColor(getRandColor(180, 200));
// 绘制100条颜色和位置全部为随机产生的线条,该线条为2f
for (int i = 0; i < 100; i++) {
int x = random.nextInt(width - 1);
int y = random.nextInt(height - 1);
int x1 = random.nextInt(6) + 1;
int y1 = random.nextInt(12) + 1;
BasicStroke bs = new BasicStroke(1f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL); // 定制线条样式
Line2D line = new Line2D.Double(x, y, x + x1, y + y1);
g2d.setStroke(bs);
g2d.draw(line); // 绘制直线
}
// 输出由英文,数字,和中文随机组成的验证文字,具体的组合方式根据生成随机数确定。
String sRand = "";
String ctmp = "";
int itmp = 0;
// 制定输出的验证码为四位
for (int i = 0; i < 4; i++) {
switch (random.nextInt(3)) {
case 10: // 生成A-Z的字母
itmp = random.nextInt(26) + 65;
ctmp = String.valueOf((char) itmp);
break;
default:
itmp = random.nextInt(10) + 48;
ctmp = String.valueOf((char) itmp);
break;
}
sRand += ctmp;
Color color = new Color(20 + random.nextInt(110), 20 + random.nextInt(110), random.nextInt(110));
g.setColor(color);
// 将生成的随机数进行随机缩放并旋转制定角度 PS.建议不要对文字进行缩放与旋转,因为这样图片可能不正常显示
/* 将文字旋转制定角度 */
Graphics2D g2d_word = (Graphics2D) g;
AffineTransform trans = new AffineTransform();
trans.rotate((45) * 3.14 / 180, 15 * i + 8, 7);
/* 缩放文字 */
float scaleSize = random.nextFloat() + 0.8f;
if (scaleSize > 1f)
scaleSize = 1f;
trans.scale(scaleSize, scaleSize);
g2d_word.setTransform(trans);
g.drawString(ctmp, 15 * i + 12, 14);
}
HttpSession session = request.getSession();
session.removeAttribute("verificationCode");
session.setAttribute("verificationCode", sRand);
g.dispose(); // 释放g所占用的系统资源
ImageIO.write(image, "JPEG", response.getOutputStream()); // 输出图片
}