第js實(shí)現(xiàn)驗(yàn)證碼干擾(動(dòng)態(tài))本文實(shí)例為大家分享了js實(shí)現(xiàn)驗(yàn)證碼動(dòng)態(tài)干擾的具體代碼，供大家參考，具體內(nèi)容如下

效果一

效果二

代碼一

!doctypehtml

html

head

metacharset="utf-8"

titlejs簡單驗(yàn)證碼使用/title

style

.code

font-family:Arial;

font-style:italic;

color:blue;

font-size:30px;

border:0;

padding:2px3px;

letter-spacing:3px;

font-weight:bolder;

float:left;

cursor:pointer;

width:150px;

height:50px;

line-height:60px;

text-align:center;

vertical-align:middle;

background-color:#D8B7E3;

span{

text-decoration:none;

font-size:12px;

color:#288bc4;

padding-left:10px;

span:hover{

text-decoration:underline;

cursor:pointer;

/style

script

//頁面加載時(shí)，生成隨機(jī)驗(yàn)證碼

window.onload=function(){

createCode(4);

//生成驗(yàn)證碼的方法

functioncreateCode(length){

varcode="";

varcodeLength=parseInt(length);//驗(yàn)證碼的長度

varcheckCode=document.getElementById("checkCode");

所有候選組成驗(yàn)證碼的字符，當(dāng)然也可以用中文的

varcodeChars=newArray(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');

//循環(huán)組成驗(yàn)證碼的字符串

for(vari=0;icodeLength;i++)

//獲取隨機(jī)驗(yàn)證碼下標(biāo)

varcharNum=Math.floor(Math.random()*62);

//組合成指定字符驗(yàn)證碼

code+=codeChars[charNum];

if(checkCode)

//為驗(yàn)證碼區(qū)域添加樣式名

checkCode.className="code";

//將生成驗(yàn)證碼賦值到顯示區(qū)

checkCode.innerHTML=code;

//檢查驗(yàn)證碼是否正確

functionvalidateCode()

//獲取顯示區(qū)生成的驗(yàn)證碼

varcheckCode=document.getElementById("checkCode").innerHTML;

//獲取輸入的驗(yàn)證碼

varinputCode=document.getElementById("inputCode").value;

console.log(checkCode);

console.log(inputCode);

if(inputCode.length=0)

alert("請輸入驗(yàn)證碼！");

elseif(inputCode.toUpperCase()!=checkCode.toUpperCase())

alert("驗(yàn)證碼輸入有誤！");

createCode(4);

else

alert("驗(yàn)證碼正確！");

/script

/head

body

tableborder="0"cellspacing="5"cellpadding="5"

tddivid="checkCode"/div/td

tdspan看不清換一張/span/td

/tr

td驗(yàn)證碼：/td

tdinputtype="text"id="inputCode"http://td

/tr

td/td

tdinputtype="button"value="確定"http://td

/tr

/table

/div

/body

/html

代碼二

!DOCTYPEhtml

html

head

metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

metahttp-equiv="X-UA-Compatible"content="ie=edge"

titlecanvas驗(yàn)證碼/title

/head

body

canvaswidth="200"height="60"id="check"您的瀏覽器不支持canvas標(biāo)簽！/canvas

script

varctx=document.getElementById("check").getContext("2d");

varctxW=document.getElementById("check").clientWidth;

varctxH=document.getElementById("check").clientHeight;

*產(chǎn)生一個(gè)隨機(jī)數(shù)可設(shè)置隨機(jī)數(shù)區(qū)間

*@param{[Number]}min[隨機(jī)數(shù)區(qū)間下限]

*@param{[Number]}max[隨機(jī)數(shù)區(qū)間上限]

*@return{[Number]}[返回一個(gè)在此區(qū)間的隨機(jī)數(shù)]

functionranNum(min,max){

returnMath.random()*(max-min)+min;

*返回一個(gè)隨機(jī)顏色可設(shè)置顏色區(qū)間

*@param{[Number]}min[顏色下限]

*@param{[Number]}max[顏色上限]

*@return{[String]}[隨機(jī)顏色]

functionranColor(min,max){

varr=ranNum(min,max);

varg=ranNum(min,max);

varb=ranNum(min,max);

//return"rgb("+r+","+g+","+b+")";

return`rgb(${r},${g},$)`;

*隨機(jī)字符串?dāng)?shù)組

*@return{[Array]}[隨機(jī)數(shù)組]

functionranStr(){

varstr="QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";

returnstr.split("").sort(function(){

returnMath.random()-0.5

*繪制文本字符串

*@param{[String]}canvasId[canvas的id]

*@param{[Number]}canvasW[canvas的width]

*@param{[Number]}canvasH[canvas的height]

*@param{[Number]}num[繪制驗(yàn)證碼的字?jǐn)?shù)]

*@param{[Number]}fsMin[字體大小下限]

*@param{[Number]}fsMax[字體大小上限]

*@param{[Number]}frMin[字體旋轉(zhuǎn)偏移下限]

*@param{[Number]}frMax[字體旋轉(zhuǎn)偏移上限]

*@param{[Number]}min[顏色下限]

*@param{[Number]}max[顏色上限]

*@return{[String]}[隨機(jī)字符串]

functiondrawText(canvasId,canvasW,canvasH,num,fsMin,fsMax,frMin,frMax,min,max){

varstr="";

for(vari=0;inum;i++){

varchar=ranStr()[Math.floor(0,ranStr().length)];

varfs=ranNum(fsMin,fsMax);

canvasId.font=fs+"pxVerdana";

canvasId.fillStyle=ranColor(min,max);

//保存繪制的狀態(tài)

canvasId.save();

//context.translate(x,y);

//x添加到水平坐標(biāo)（x）上的值

//y添加到垂直坐標(biāo)（y）上的值

//偏移

canvasId.translate(canvasW/num*i+canvasW/20,0);

//變換角度

canvasId.rotate(ranNum(frMin,frMax)*Math.PI/180);

//context.fillText(text,x,y,maxWidth);

//text規(guī)定在畫布上輸出的文本。

//x開始繪制文本的x坐標(biāo)位置（相對于畫布）。

//y開始繪制文本的y坐標(biāo)位置（相對于畫布）。

//maxWidth可選。允許的最大文本寬度，以像素計(jì)。

canvasId.fillText(char,0,(canvasH+fs)/2.5,canvasW/num);

//返回之前保存過的路徑狀態(tài)和屬性

ctx.restore();

str+=char;

//console.log(str);

returnstr;

*繪制背景

*@param{[String]}canvasId[canvas的id]

*@param{[Number]}canvasW[canvas的width]

*@param{[Number]}canvasH[canvas的height]

*@param{[Number]}min[下限]

*@param{[Number]}max[上限]

functiondrawBg(canvasId,canvasW,canvasH,min,max){

//繪制canvas背景

canvasId.fillStyle=ranColor(min,max);

//填充顏色

canvasId.fillRect(0,0,canvasW,canvasH);

*繪制干擾圓點(diǎn)

*@param{[String]}canvasId[canvas的id]

*@param{[Number]}canvasW[canvas的width]

*@param{[Number]}canvasH[canvas的