Js-like Baidu Post-bar Verification Code special effect instance code _ javascript skills

This article mainly introduces js imitation Baidu Post Bar Verification Code special effect instance code. If you need it, you can refer to the Baidu verification code that is very interesting today and copy it.

Use JS to achieve automatic comparison after four options are selected. This article uses the static comparison method to check whether all the matching options are selected. Then prompt [correct answer !] Or [incorrect answer !],

If you have time, make a program and share it with you!

As follows:

The source code is as follows:

The Code is as follows:

Js, similar to Baidu posts, verification code, special effect

Can't see clearly?

Text input in the boxChinese character or pinyinCorresponding Chinese Characters

Script

Function getid (id ){
Return document. getElementById (id );
}

// Obtain the attribute Style
Function getStyle (id, prop ){
Var obj = getid (id );
Var ie =! + "\ V1"; // ie6 ~ 8
If (prop = "backgroundPosition") {// IE6 ~ 8. It is not compatible with the backgroundPosition Writing Method and recognizes backgroundPositionX/Y.
If (ie ){
Return obj. currentStyle. backgroundPositionX + "" + obj. currentStyle. backgroundPositionY;
}
}
If (obj. currentStyle ){
Return obj. currentStyle [prop];
}
Else if (window. getComputedStyle ){
Proppropprop = prop. replace (/([A-Z])/g, "-$1 ");
Proppropprop = prop. toLowerCase ();
Return document. defaultView. getComputedStyle (obj, null) [prop];
}
}

Var anslist = ["", ""]; // storage container
Var crent = "-56px-92px,-100px-138px,-100px-92px,-3px-138px"; // container with the correct answer
Var flag = 0; // The value starts from 0th to automatically compare the answer when the number reaches 3rd.
Var adbs = getid ("val_add"). getElementsByTagName ("B ");
Function addans (va ){
For (var I = 0; I {
If (anslist [I] = "")
{
Anslist [I] = va;
Adbspolici2.16.style.css Text = "background-position:" + anslist [I];
Flag = I;
Break;
}
}
If (flag = 3)
{
If (anslist = crent)
{
Alert ("the answer is correct! ");
}
Else
{
Alert ("Incorrect answer! ");
Dele ();
}
}
}

// Clear the original value
Function dele (){
Flag = 0;
For (var I = 0; I adbspolici#.style.css Text = "";
Anslist = ["", ""];
}

// Click the event to bind the jiugongge Verification Code
Function addEvt (tab, ct, type ){
Var ALB = getid (tab). getElementsByTagName ("B ");
// Var cp = getid (ct). getElementsByTagName (type );
For (var I = 0; I {
Alb [I]. onclick = function std (){
// Alert (this. id );
Var st = getStyle (this. id, "backgroundPosition ");
Var ststd = st. split (""); // the space in the middle of the attribute is used as the separator, for example, background-position: 215px 215px; the value obtained by getStyle is 215px 215px;
Var st1, st2 = "";
/*-53px-36px,-56px-41px; After comparison, the x difference-3 and y difference-5 */
St1 = parseInt (std [0]. replace ("px")-3;
St2 = parseInt (std [1]. replace ("px")-5;
Addans (st1 + "px" + st2 + "px ");
}

}
}
AddEvt ("val_input ");
Script

Source: http://www.86y.org/art_detail.aspx? Id = 682