原理:
創(chuàng)新互聯(lián)響應(yīng)式網(wǎng)站特點(diǎn)就是不管在電腦、平板還是手機(jī)上,成都h5網(wǎng)站建設(shè)都會(huì)根據(jù)屏幕尺寸自動(dòng)調(diào)節(jié)大小、圖片分辨率,并且融入一定的動(dòng)畫特效,讓網(wǎng)站看起來非常的美觀大方。從網(wǎng)站需求對(duì)接到網(wǎng)站制作設(shè)計(jì)、從代碼編寫到項(xiàng)目上線運(yùn)維,技術(shù)人員全程跟蹤,快速響應(yīng)
1.隨機(jī)生成4個(gè)數(shù)字 用到了Random類
2.對(duì)這4個(gè)數(shù)字設(shè)置字體格式 用 setFont方法
3.改變字體顏色用setColor 然后隨機(jī)生成顏色
代碼如下
package s1;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.jms.Session;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class GetImage extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 發(fā)送圖片不能夠添加這2行代碼
// response.setContentType("text/html;charset=UTF-8");
// request.setCharacterEncoding("UTF-8");
int width=100;
int height=50;
//獲得一張圖片
BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g=image.getGraphics();
g.setColor(Color.WHITE);
g.fillRect(1, 1, width-2, height-2);
g.setFont(new Font("宋體",Font.BOLD,30));
Random random=new Random();
// 填充的字符串
String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
//緩存生成的驗(yàn)證碼
StringBuffer stringbuffer=new StringBuffer();
//隨機(jī)生成驗(yàn)證碼的顏色和字符
for(int i=0;i4;i++)
{ //設(shè)置隨機(jī)顏色
g.setColor(new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256)));
int index=random.nextInt(62);//這里的62就是從填充字符段中隨意選取一個(gè)位置
String str1=str.substring(index,index+1);
g.drawString(str1, 20*i, 30);//x,y數(shù)值設(shè)置太小會(huì)顯示不出來
stringbuffer.append(str1);
}
//將生成的驗(yàn)證碼存到服務(wù)器
request.getSession().setAttribute("checkcode", stringbuffer.toString());//key和value
//將圖片發(fā)送給瀏覽器
ImageIO.write(image, "jpg", response.getOutputStream());
}
}
用戶登錄界面代碼
package s1;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class Login extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");// 設(shè)置服務(wù)器發(fā)送給瀏覽器的編碼方式
request.setCharacterEncoding("UTF-8"); // 客戶端向服務(wù)器提交的數(shù)據(jù)的解碼方式
// 獲得用戶提交的數(shù)據(jù)
String checkcode = request.getParameter("checkcode");
System.out.println(checkcode);
// 判斷輸入的驗(yàn)證碼是不是符合
HttpSession session = request.getSession();// session是存放數(shù)據(jù)的地方
String str = (String) session.getAttribute("checkcode");
if (str != null) {
if (checkcode.compareToIgnoreCase(str) == 0) // 驗(yàn)證碼忽略大小寫
response.getWriter().println("驗(yàn)證碼輸入正確");
else
response.getWriter().println("驗(yàn)證碼輸入錯(cuò)誤");
}
else response.getWriter().println("驗(yàn)證碼失效");
// 使用完的驗(yàn)證碼信息要?jiǎng)h除,返回原頁面再輸一次,驗(yàn)證碼就失效了
session.removeAttribute("checkcode");
}
}
package?util;
import?java.awt.Color;
import?java.awt.Font;
import?java.awt.Graphics;
import?java.awt.image.BufferedImage;
import?java.io.FileOutputStream;
import?java.io.IOException;
import?java.io.OutputStream;
import?java.util.Random;
import?javax.imageio.ImageIO;
public?final?class?ImageUtil?{
//?驗(yàn)證碼字符集
private?static?final?char[]?chars?=?{?
'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'};
//?字符數(shù)量
private?static?final?int?SIZE?=?4;
//?干擾線數(shù)量
private?static?final?int?LINES?=?5;
//?寬度
private?static?final?int?WIDTH?=?80;
//?高度
private?static?final?int?HEIGHT?=?40;
//?字體大小
private?static?final?int?FONT_SIZE?=?30;
/**
*?生成隨機(jī)驗(yàn)證碼及圖片
*?返回的數(shù)組中,第1個(gè)值是驗(yàn)證碼,第2個(gè)值是圖片
*/
public?static?Object[]?createImage()?{
StringBuffer?sb?=?new?StringBuffer();
//?1.創(chuàng)建空白圖片
BufferedImage?image?=?new?BufferedImage(
WIDTH,?HEIGHT,?BufferedImage.TYPE_INT_RGB);
//?2.獲取圖片畫筆
Graphics?graphic?=?image.getGraphics();
//?3.設(shè)置畫筆顏色
graphic.setColor(Color.LIGHT_GRAY);
//?4.繪制矩形背景
graphic.fillRect(0,?0,?WIDTH,?HEIGHT);
//?5.畫隨機(jī)字符
Random?ran?=?new?Random();
for?(int?i?=?0;?i?SIZE;?i++)?{
//?取隨機(jī)字符索引
int?n?=?ran.nextInt(chars.length);
//?設(shè)置隨機(jī)顏色
graphic.setColor(getRandomColor());
//?設(shè)置字體大小
graphic.setFont(new?Font(
null,?Font.BOLD?+?Font.ITALIC,?FONT_SIZE));
//?畫字符
graphic.drawString(
chars[n]?+?"",?i?*?WIDTH?/?SIZE,?HEIGHT?/?2);
//?記錄字符
sb.append(chars[n]);
}
//?6.畫干擾線
for?(int?i?=?0;?i??LINES;?i++)?{
//?設(shè)置隨機(jī)顏色
graphic.setColor(getRandomColor());
//?隨機(jī)畫線
graphic.drawLine(ran.nextInt(WIDTH),?ran.nextInt(HEIGHT),
ran.nextInt(WIDTH),?ran.nextInt(HEIGHT));
}
//?7.返回驗(yàn)證碼和圖片
return?new?Object[]{sb.toString(),?image};
}
/**
*?隨機(jī)取色
*/
public?static?Color?getRandomColor()?{
Random?ran?=?new?Random();
Color?color?=?new?Color(ran.nextInt(256),?
ran.nextInt(256),?ran.nextInt(256));
return?color;
}
public?static?void?main(String[]?args)?throws?IOException?{
Object[]?objs?=?createImage();
BufferedImage?image?=?(BufferedImage)?objs[1];
OutputStream?os?=?new?FileOutputStream("d:/1.png");
ImageIO.write(image,?"jpeg",?os);
os.close();
}
}
package com.servlet;
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.imageio.ImageIO;
public class PictureCheckCode extends HttpServlet {
private static final long serialVersionUID = 1L;
public PictureCheckCode() {
super();
}
public void destroy() {
super.destroy();
}
public void init() throws ServletException {
super.init();
}
/*該方法主要作用是獲得隨機(jī)生成的顏色*/
public Color getRandColor(int s,int e){
Random random=new Random ();
if(s255) s=255;
if(e255) e=255;
int r,g,b;
r=s+random.nextInt(e-s); //隨機(jī)生成RGB顏色中的r值
g=s+random.nextInt(e-s); //隨機(jī)生成RGB顏色中的g值
b=s+random.nextInt(e-s); //隨機(jī)生成RGB顏色中的b值
return new Color(r,g,b);
}
@Override
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//設(shè)置不緩存圖片
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
//指定生成的響應(yīng)圖片,一定不能缺少這句話,否則錯(cuò)誤.
response.setContentType("image/jpeg");
int width=86,height=22; //指定生成驗(yàn)證碼的寬度和高度
BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //創(chuàng)建BufferedImage對(duì)象,其作用相當(dāng)于一圖片
Graphics g=image.getGraphics(); //創(chuàng)建Graphics對(duì)象,其作用相當(dāng)于畫筆
Graphics2D g2d=(Graphics2D)g; //創(chuàng)建Grapchics2D對(duì)象
Random random=new Random();
Font mfont=new Font("楷體",Font.BOLD,16); //定義字體樣式
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height); //繪制背景
g.setFont(mfont); //設(shè)置字體
g.setColor(getRandColor(180,200));
//繪制100條顏色和位置全部為隨機(jī)產(chǎn)生的線條,該線條為2f
for(int i=0;i100;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(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL); //定制線條樣式
Line2D line=new Line2D.Double(x,y,x+x1,y+y1);
g2d.setStroke(bs);
g2d.draw(line); //繪制直線
}
//輸出由英文,數(shù)字,和中文隨機(jī)組成的驗(yàn)證文字,具體的組合方式根據(jù)生成隨機(jī)數(shù)確定。
String sRand="";
String ctmp="";
int itmp=0;
//制定輸出的驗(yàn)證碼為四位
for(int i=0;i4;i++){
switch(random.nextInt(3)){
case 1: //生成A-Z的字母
itmp=random.nextInt(26)+65;
ctmp=String.valueOf((char)itmp);
break;
case 2: //生成漢字
String[] rBase={"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"};
//生成第一位區(qū)碼
int r1=random.nextInt(3)+11;
String str_r1=rBase[r1];
//生成第二位區(qū)碼
int r2;
if(r1==13){
r2=random.nextInt(7);
}else{
r2=random.nextInt(16);
}
String str_r2=rBase[r2];
//生成第一位位碼
int r3=random.nextInt(6)+10;
String str_r3=rBase[r3];
//生成第二位位碼
int r4;
if(r3==10){
r4=random.nextInt(15)+1;
}else if(r3==15){
r4=random.nextInt(15);
}else{
r4=random.nextInt(16);
}
String str_r4=rBase[r4];
//將生成的機(jī)內(nèi)碼轉(zhuǎn)換為漢字
byte[] bytes=new byte[2];
//將生成的區(qū)碼保存到字節(jié)數(shù)組的第一個(gè)元素中
String str_12=str_r1+str_r2;
int tempLow=Integer.parseInt(str_12, 16);
bytes[0]=(byte) tempLow;
//將生成的位碼保存到字節(jié)數(shù)組的第二個(gè)元素中
String str_34=str_r3+str_r4;
int tempHigh=Integer.parseInt(str_34, 16);
bytes[1]=(byte)tempHigh;
ctmp=new String(bytes);
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);
//將生成的隨機(jī)數(shù)進(jìn)行隨機(jī)縮放并旋轉(zhuǎn)制定角度 PS.建議不要對(duì)文字進(jìn)行縮放與旋轉(zhuǎn),因?yàn)檫@樣圖片可能不正常顯示
/*將文字旋轉(zhuǎn)制定角度*/
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(scaleSize1f) scaleSize=1f;
trans.scale(scaleSize, scaleSize);
g2d_word.setTransform(trans);
g.drawString(ctmp, 15*i+18, 14);
}
HttpSession session=request.getSession(true);
session.setAttribute("randCheckCode", sRand);
g.dispose(); //釋放g所占用的系統(tǒng)資源
ImageIO.write(image,"JPEG",response.getOutputStream()); //輸出圖片
}
}
JFrame jFrame = new JFrame("提示");
jFrame.setLayout(null);
jFrame.setResizable(false);
jFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Dimension dimension = Toolkit.getDefaultToolkit().getScreenSize();
jFrame.setBounds((int)(dimension.getWidth() - 300) / 2, (int)(dimension.getHeight() - 200) / 2, 300, 200);
JLabel label1 = new JLabel("請(qǐng)輸入驗(yàn)證碼:");
label1.setBounds(5, 80, 100, 20);
jFrame.add(label1);
Random random = new Random();
String code = "";
for(int i = 0; i 4; i++) {
code += random.nextInt(10);
}
JLabel label2 = new JLabel(String.valueOf(code));
label2.setBounds(160, 80, 40, 20);
jFrame.add(label2);
JTextField text = new JTextField();
text.setBounds(100, 80, 50, 20);
jFrame.add(text);
jFrame.setVisible(true);
package com.bbs.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
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;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;
public class Image extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("image/jpeg");
OutputStream out = response.getOutputStream();
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
int width = 60, height = 20;
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
// 獲取圖形上下文
Graphics g = image.getGraphics();
// 生成隨機(jī)類
Random random = new Random();
// 設(shè)定背景色
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
// 設(shè)定字體
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
// 隨機(jī)產(chǎn)生155條干擾線,使圖象中的認(rèn)證碼不易被其它程序探測(cè)到
g.setColor(getRandColor(180, 200));
for (int i = 0; i 155; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// 取隨機(jī)產(chǎn)生的認(rèn)證碼(4位數(shù)字)
String sRand =setRandValue(request);
if(sRand!=null)
for (int i = 0; i sRand.length(); i++) {
g.setColor(new Color(20 + random.nextInt(200), 20 + random
.nextInt(200), 20 + random.nextInt(200)));
// 調(diào)用函數(shù)出來的顏色相同,可能是因?yàn)榉N子太接近,所以只能直接生成
g.drawString(sRand.charAt(i) + "", 13 * i + 6, 16);
}
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
encoder.encode(image);
// 圖象生效
g.dispose();
// 輸出圖象到頁面
// ImageIO.write(image, "JPG", response.getOutputStream());
out.flush();
out.close();
}
Color getRandColor(int fc, int bc) {// 給定范圍獲得隨機(jī)顏色
Random random = new Random();
if (fc 255)
fc = 255;
if (bc 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
//48-57對(duì)應(yīng)0-9;65-90對(duì)應(yīng)A-Z;97-122對(duì)應(yīng)a-z;
String setRandValue(HttpServletRequest request) {
Random random = new Random();
String sRand = "";
//這里是生成驗(yàn)證碼的位數(shù)
for (int i = 0; i 4; i++) {
char c = 0;
int k = random.nextInt(3);
switch (k) {
case 0:
c = (char) (random.nextInt(10) + 48);
break;
case 1:
c = (char) (random.nextInt(26) + 65);
break;
case 2:
c = (char) (random.nextInt(26) + 97);
}
sRand += c;
}
request.getSession().setAttribute("rands", sRand);
return sRand;
}
}
Java如何實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能呢?日常生活中,驗(yàn)證碼隨處可見,他可以在一定程度上保護(hù)賬號(hào)安全,那么他是怎么實(shí)現(xiàn)的呢?
Java實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能其實(shí)非常簡(jiǎn)單:用到了一個(gè)Graphics類在畫板上繪制字母,隨機(jī)選取一定數(shù)量的字母隨機(jī)生成,然后在畫板上隨機(jī)生成幾條干擾線。
首先,寫一個(gè)驗(yàn)證碼生成幫助類,用來繪制隨機(jī)字母:
import?java.awt.Color;
import?java.awt.Font;
import?java.awt.Graphics;
import?java.awt.image.BufferedImage;
import?java.io.IOException;
import?java.io.OutputStream;
import?java.util.Random;
import?javax.imageio.ImageIO;
public?final?class?GraphicHelper?{
/**
*?以字符串形式返回生成的驗(yàn)證碼,同時(shí)輸出一個(gè)圖片
*
*?@param?width
*????????????圖片的寬度
*?@param?height
*????????????圖片的高度
*?@param?imgType
*????????????圖片的類型
*?@param?output
*????????????圖片的輸出流(圖片將輸出到這個(gè)流中)
*?@return?返回所生成的驗(yàn)證碼(字符串)
*/
public?static?String?create(final?int?width,?final?int?height,?final?String?imgType,?OutputStream?output)?{
StringBuffer?sb?=?new?StringBuffer();
Random?random?=?new?Random();
BufferedImage?image?=?new?BufferedImage(width,?height,?BufferedImage.TYPE_INT_RGB);
Graphics?graphic?=?image.getGraphics();
graphic.setColor(Color.getColor("F8F8F8"));
graphic.fillRect(0,?0,?width,?height);
Color[]?colors?=?new?Color[]?{?Color.BLUE,?Color.GRAY,?Color.GREEN,?Color.RED,?Color.BLACK,?Color.ORANGE,
Color.CYAN?};
//?在?"畫板"上生成干擾線條?(?50?是線條個(gè)數(shù))
for?(int?i?=?0;?i??50;?i++)?{
graphic.setColor(colors[random.nextInt(colors.length)]);
final?int?x?=?random.nextInt(width);
final?int?y?=?random.nextInt(height);
final?int?w?=?random.nextInt(20);
final?int?h?=?random.nextInt(20);
final?int?signA?=?random.nextBoolean()???1?:?-1;
final?int?signB?=?random.nextBoolean()???1?:?-1;
graphic.drawLine(x,?y,?x?+?w?*?signA,?y?+?h?*?signB);
}
//?在?"畫板"上繪制字母
graphic.setFont(new?Font("Comic?Sans?MS",?Font.BOLD,?30));
for?(int?i?=?0;?i??6;?i++)?{
final?int?temp?=?random.nextInt(26)?+?97;
String?s?=?String.valueOf((char)?temp);
sb.append(s);
graphic.setColor(colors[random.nextInt(colors.length)]);
graphic.drawString(s,?i?*?(width?/?6),?height?-?(height?/?3));
}
graphic.dispose();
try?{
ImageIO.write(image,?imgType,?output);
}?catch?(IOException?e)?{
e.printStackTrace();
}
return?sb.toString();
}
}?
接著,創(chuàng)建一個(gè)servlet,用來固定圖片大小,以及處理驗(yàn)證碼的使用場(chǎng)景,以及捕獲頁面生成的驗(yàn)證碼(捕獲到的二維碼與用戶輸入的驗(yàn)證碼一致才能通過)。
import?java.io.OutputStream;
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?javax.servlet.http.HttpSession;
@WebServlet(urlPatterns?=?"/verify/regist.do"?)
public?class?VerifyCodeServlet?extends?HttpServlet?{
private?static?final?long?serialVersionUID?=?3398560501558431737L;
@Override
protected?void?service(HttpServletRequest?request,?HttpServletResponse?response)
throws?ServletException,?IOException?{
//?獲得?當(dāng)前請(qǐng)求?對(duì)應(yīng)的?會(huì)話對(duì)象
HttpSession?session?=?request.getSession();
//?從請(qǐng)求中獲得?URI?(?統(tǒng)一資源標(biāo)識(shí)符?)
String?uri?=?request.getRequestURI();
System.out.println("hello?:?"?+?uri);
final?int?width?=?180;?//?圖片寬度
final?int?height?=?40;?//?圖片高度
final?String?imgType?=?"jpeg";?//?指定圖片格式?(不是指MIME類型)
final?OutputStream?output?=?response.getOutputStream();?//?獲得可以向客戶端返回圖片的輸出流
//?(字節(jié)流)
//?創(chuàng)建驗(yàn)證碼圖片并返回圖片上的字符串
String?code?=?GraphicHelper.create(width,?height,?imgType,?output);
System.out.println("驗(yàn)證碼內(nèi)容:?"?+?code);
//?建立?uri?和?相應(yīng)的?驗(yàn)證碼?的關(guān)聯(lián)?(?存儲(chǔ)到當(dāng)前會(huì)話對(duì)象的屬性中?)
session.setAttribute(uri,?code);
System.out.println(session.getAttribute(uri));
}
}?
接著寫一個(gè)HTML注冊(cè)頁面用來檢驗(yàn)一下:
html
head
meta?charset="UTF-8"
title注冊(cè)/title
link?rel="stylesheet"?href="styles/general.css"
link?rel="stylesheet"?href="styles/cell.css"
link?rel="stylesheet"?href="styles/form.css"
script?type="text/javascript"?src="js/ref.js"/script
style?type="text/css"?
.logo-container?{
margin-top:?50px?;
}
.logo-container?img?{
width:?100px?;
}
.message-container?{
height:?80px?;
}
.link-container?{
height:?40px?;
line-height:?40px?;
}
.link-container?a?{
text-decoration:?none?;
}
/style
/head
body
div?class="container?form-container"
form?action="/wendao/regist.do"?method="post"
div?class="form"?!--?注冊(cè)表單開始?--
div?class="form-row"
span?class="cell-1"
i?class="fa?fa-user"/i
/span
span?class="cell-11"?style="text-align:?left;"
input?type="text"?name="username"?placeholder="請(qǐng)輸入用戶名"
/span
/div
div?class="form-row"
span?class="cell-1"
i?class="fa?fa-key"/i
/span
span?class="cell-11"?style="text-align:?left;"
input?type="password"?name="password"?placeholder="請(qǐng)輸入密碼"
/span
/div
div?class="form-row"
span?class="cell-1"
i?class="fa?fa-keyboard-o"/i
/span
span?class="cell-11"?style="text-align:?left;"
input?type="password"?name="confirm"?placeholder="請(qǐng)確認(rèn)密碼"
/span
/div
div?class="form-row"
span?class="cell-7"
input?type="text"?name="verifyCode"?placeholder="請(qǐng)輸入驗(yàn)證碼"
/span
span?class="cell-5"?style="text-align:?center;"
img?src="/demo/verify/regist.do"?onclick="myRefersh(this)"
/span
/div
div?class="form-row"?style="border:?none;"
span?class="cell-6"?style="text-align:?left"
input?type="reset"?value="重置"
/span
span?class="cell-6"??style="text-align:right;"
input?type="submit"?value="注冊(cè)"
/span
/div
/div?!--?注冊(cè)表單結(jié)束?--
/form
/div
/body
/html
效果如下圖:
在控制臺(tái)接收到的圖片中驗(yàn)證碼的變化如下:
當(dāng)點(diǎn)擊刷新頁面的時(shí)候,驗(yàn)證碼也會(huì)隨著變化,但我們看不清驗(yàn)證碼時(shí),只要點(diǎn)擊驗(yàn)證碼就會(huì)刷新,這樣局部的刷新可以用JavaScript來實(shí)現(xiàn)。
在img
src="/demo/verify/regist.do"中,添加一個(gè)問號(hào)和一串后綴數(shù)字,當(dāng)刷新時(shí)讓后綴數(shù)字不斷改變,那么形成的驗(yàn)證碼也會(huì)不斷變化,我們可以采用的一種辦法是后綴數(shù)字用date代替,date獲取本機(jī)時(shí)間,時(shí)間是隨時(shí)變的,這樣就保證了刷新驗(yàn)證碼可以隨時(shí)變化。
代碼如下:
function?myRefersh(?e?)?{
const?source?=?e.src?;?//?獲得原來的?src?中的內(nèi)容
//console.log(?"source?:?"?+?source??)?;
var?index?=?source.indexOf(?"?"?)?;??//?從?source?中尋找???第一次出現(xiàn)的位置?(如果不存在則返回?-1?)
//console.log(?"index?:?"?+?index??)?;
if(?index??-1?)?{?//?如果找到了????就進(jìn)入內(nèi)部
var?s?=?source.substring(?0?,?index?)?;?//?從?source?中截取?index?之前的內(nèi)容?(?index?以及?index?之后的內(nèi)容都被舍棄?)
//console.log(?"s?:?"?+?s??)?;
var?date?=?new?Date();?//?創(chuàng)建一個(gè)?Date?對(duì)象的?一個(gè)?實(shí)例
var?time?=?date.getTime()?;?//?從?新創(chuàng)建的?Date?對(duì)象的實(shí)例中獲得該時(shí)間對(duì)應(yīng)毫秒值
e.src?=?s?+?"?time="?+?time?;?//?將?加了?尾巴?的?地址?重新放入到?src?上
//console.log(?e.src?)?;
}?else?{
var?date?=?new?Date();
e.src?=?source?+?"?time="?+?date.getTime();
}
}
如回答不詳細(xì)可追問
本文標(biāo)題:java窗體驗(yàn)證碼代碼,驗(yàn)證碼怎么實(shí)現(xiàn)java
新聞來源:http://muchs.cn/article42/phigec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、網(wǎng)站制作、網(wǎng)站改版、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)