登陆时的验证码设计、及点击刷新的编写方式
2016-08-05 19:20
267 查看
</pre><pre class="java" name="code">jvaservlet的代码，这里是绘制验证码的图片
package com.cn.demol2;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Checkpic extends HttpServlet {
//第一步创建图片的规格大小
public static final int WIDTH = 150;
public static final int HEIGTH = 30;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
BufferedImage image = new BufferedImage(WIDTH, HEIGTH, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
//设置背景颜色
setBackground(g);
//设置边框
setBorder(g);
//设置干扰线
setRandomLine(g);
//写随机数
setRondomNum((Graphics2D) g);
response.setDateHeader("expries",-1);
response.setHeader("cache", "no-cache");
response.setHeader("pragma", "no-cache");
response.setContentType("image/jpeg");
ImageIO.write(image,"jpg",response.getOutputStream());
}
private void setRondomNum(Graphics2D g) {
// TODO Auto-generated method stub
g.setColor(Color.BLACK);
g.setFont(new Font("宋体",Font.BOLD,20));
String data = "本时钟仅供参考不作为计费依据您已经建立了宽带上网的连接如果您想继续使用宽带上网功能请不要关闭本窗口如果您想断开连接请单击下线按钮";//随机出现在图片中的字段
int x = 5;
for(int i = 0;i<4;i++){
int degree = new Random().nextInt()%30;
String ch = data.charAt(new Random().nextInt(data.length()))+"";//强制字符转换
g.rotate(degree * Math.PI/180,x,20);//旋转的角度
g.drawString(ch, x, 20);
g.rotate(-degree * Math.PI/180,x,20);//反向旋转
x+=30;//避免字体重叠
}
}
private void setRandomLine(Graphics g) {
// TODO Auto-generated method stub
g.setColor(Color.RED);
for(int i= 0;i<6;i++){
int x1 = new Random().nextInt(WIDTH);
int y1 = new Random().nextInt(HEIGTH);
int x2 = new Random().nextInt(WIDTH);
int y2 = new Random().nextInt(HEIGTH);
g.drawLine(x1, y1, x2, y2);//得到6条随机线
}
}
private void setBorder(Graphics g) {
// TODO Auto-generated method stub
g.setColor(Color.BLUE);
g.drawRect(1, 1, WIDTH-2, HEIGTH-2);//设计边框颜色，大小
}
private void setBackground(Graphics g) {
// TODO Auto-generated method stub
g.setColor(Color.WHITE);
g.fillRect(0,0,WIDTH,HEIGTH);设计验证码图片的背景颜色和颜色填充的大小
}
}jsp页面 ：
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">function ChangeImage(img){
img.src = img.src+"?"+new Date().getTime();
}<!--创建changeimage的方法-->
</script>
<title>注册页面</title>
</head>
<body>
<form>
<table>
<tr>
<td>
id:<input type = "text" ><br/>
</td>
</tr>
<tr>
<td>
密码:<input type = "password"><br/>
</td>
</tr>
<tr>
<td>
验证码:<input type = "text"> <img src = "/note/servlet/Checkpic" onclick = "ChangeImage (this)" alt = "换一张" style = "cursor:hand"><!--在图片上单击刷新图片验证码，并且将鼠标的箭头在图片上的状态改成手的形状-->
<br/>
</td>
</tr>
<tr>
<td>
<input type = "submit" value = "提交">
<input type = "reset" value = "重置"><br/>
</td>
</tr>
</table>
</form>
</body>
</html>
<img width="783" height="733" style="width: 634px; height: 552px;" src="https://img-blog.csdn.net/20160805192809368?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 