JS實現三種驗證碼效果

前言

這周練習了幾個js的小練習，全是關於驗證碼的。其中驗證碼和數字驗證碼需要用到canvas。在這裡想先寫一點關於驗證碼知識。

三種驗證碼總結思路和**如下:

一.簡單驗證碼

1.效果如下:

2.思路分析:

這樣的乙個驗證碼效果，有這些功能:

那麼要如何實現呢?

mouseup需要做的事是:在滑塊元素上繫結滑鼠移除事件，首先我們需要知道的是，倘若滑塊已經移到最後，那麼滑鼠移除事件是不起作用的。可以新增乙個標誌位,當驗證成功時為true。判斷標誌位為false時，滑鼠移除事件才會起作用。滑鼠移除事件做的是使滑塊能夠移動至最初位置的效果。

並且在移除事件的最後要進行滑鼠移動事件的清除。執行這一步的原因是當第一次按下滑塊移動至框中間再鬆開滑塊移至最初位置後，若滑鼠移動事件仍然存在，那麼不需要再次按下便可以移動滑塊。但我們需要實現的效果是移至最初位置後需要滑鼠再次按下之後移動滑塊生效。

3.源**:

html:

>
class
="box"
>
class
="word"
>
拖動滑塊驗證div
>
class
="square"
>
div>
class
="bg"
>
div>
div>
body
>
css:
*.box
.word
.square
.bg

js:

var btn=}}
}},    up:
function()
}}btn.
down()
;btn.up(
);

二.滑塊驗證碼

1.效果如下:

2.源**:

html:

>
class
=>
class
="cap"
>
div>
div>
body
>
css:
*.cap
.block
.slidercontainer
.word
.square
.bg.bgactive
.squareactive
.square:hover
.squarefail
.bgfail
.squaresuccess
.bgsuccess
.refreshicon

js:

function
getnumberrange
(start,end)
function
getimageurl()
function
createimage
(loading)
img.src=
getimageurl()
;return img;
}function
addclass
(tag,name)
var obj=
,    initdom:
function()
)},    initimage:
function()
);},
draw()
,drawing
(ctx,ope,x,y)
,    clean:
function()
,    reset:
function()
,    refresh:
function()
},move:
function()
}this
.square.
onmouseup
=(e)
=>
else
,1500)}
}}}}
obj.
init
(document.
getelementsbyclassname
('cap')[
0]);

三.圖形驗證碼

1.效果如下:

2.源**:

html:

>
class
=>
type
="text"
class
="inputtext"
value='
'>
"pic"
>
div>
div>
body
>
css:
*

.inputtext

js:

function
randomnum
(min,max)
function
randomcolor
(min,max)
function
numarr()
function
letterarr()
var obj=
,//處理引數
**erify:
function
(options)
//判斷傳入的引數
if(object.prototype.tostring.
call
(options)
=='[object object]')}
else},
initcanvas:
function()
parent.
(canvas);}
,    refresh:
function()
else
if(self.options.type==
'number'
)else
for(
var i=
1;i<=4;
++i)
//3.畫干擾線
for(i=
0;i<4;
++i)
//4.畫干擾點
for(i=
0;i<
this
.options.width/4;
++i)}}
,//判斷輸入的值與驗證碼的值是否一致
judge:
function
(code)
else},
//與input結合
fun:
function()
else}}
}}}obj.
init
("verifycanvas"
);

JS實現三種驗證碼效果

js實現驗證碼

驗證碼功能js實現

js實現Web驗證碼

JS實現三種驗證碼效果

js實現驗證碼

驗證碼功能js實現

js實現Web驗證碼

相關推薦