Today, I saw that the Baidu verification code was very interesting, so I imitated it.
Use JS to automatically compare it after selecting 4 ones. In this article, the method of static contrast to see if you choose all you choose. Then prompt [The answer is correct! ] Or [answer error!],
In the future, I will make a program, and I will share it with you first!
The effect map is as follows:
The source code is as follows:
Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<Title> JS imitation Baidu Post Bar Verification Code Special Effect </Title>
<Style>
div {margin: 0; padding: 0;}
.com {width: 246px; font-size: 12px; padding: 12px; border: 1px solid #ccc;}
.Clearfix: After {Content: ".". "; Display: Block; Height: 0; Clear: Both; VISIBILITY: Hidden} .Clearfix {zoom: 1}
.j_captcha_input {border: 1px solid #ccc;}
.val_add b, .input_show span,. Val_input AB {background: url (http://images/20140113213606506.png) no -repeat -500px -500px;}
.input_show {Height: 36px; Margin-Bottom: 5px;}
.input_show span {background-posity: 0 0; display: inline-black; height: 36px; margin-right: 5px; vertical-align: middle; width: 150px;}.
.val_add {border: 1px solid #ccc; word-break: break-all; margin: 0 20px 5px 0;}
.val_add b {border-right: 1px solid #dddd; height: 34px; width: 45px; float: left;}
.val_add .delete {background: url (http://images/20140113213531521.png) No-Repeat 0 0 #ccc; ;}
.en I {font-style: normal; color:#ff0000;}
.val_input {width: 190px; margin-top: 5px;}
. Val_input a {display: block; float: left; margin: 0 5px 5px 0; width: 54px; height: 40px; border: 1px solid #e0e0e0; f; comline: 0; background:- MS-LINEAR-GRADIENT (TOP,#FFF,#F5F5F5); Background: -webkit-Gradient (linear, left top, leftom, from (#FFF), to (#F5F5F5)); background: -moz-linear- Gradient (TOP,#FFF,#FAFAFA); Filter: Progid: DximageTransform.micro Soft.gradient (Gradienttype = 0, StartColorsstr =#FFFFFFF, ENDCOLORSTR =# F5f5f5); zoom: 1}
.val_input ab {width: 54px; height: 40px; cursor: pointer; zoom: 1; display: block;}
.val_input #v_0 {background -posity: 0 -36px}
.val_input #v_1 {background-posity: -53px -36px}/*-56px -41px;
.val_input #v_2 {background-posity: -97px -36px}
.val_input #v_3 {background -posity: 0 -87px}
.val_input #v_4 {background-posity: -53px -87px}
.val_input #v_5 {background-posity: -97px -87px}
.val_input #v_6 {background -posity: 0 -133px}
.val_input #v_7 {background-posity: -53px -133px}
.val_input #v_8 {background-posity: -97px -133px}
</style>
</head>
<body>
<div>
<div ID = "Val_add">
<b> </b>
<b> </b>
<b> </b>
<b> </b>
<b onclick = "dele ();"> </b>
</div>
<div> <span> </span> <a> Can't see it clearly? </a> </div>
<div> Click the text in the box to enter the figure in the figure above <i> Chinese characters or pinyin </i> corresponding Chinese characters </div>
<div ID = "Val_input">
<A href = "javascript:;"> <b ID = "v_0"> </b> </a>
<A href = "javascript:;"> <b ID = "v_1"> </b> </a>
<A href = "javascript:;"> <b ID = "v_2"> </b> </a>
<A href = "javascript:;"> <b ID = "v_3"> </b> </a>
<A href = "javascript:;"> <b ID = "v_4"> </b> </a>
<A href = "javascript:;"> <b ID = "v_5"> </b> </a>
<A href = "javascript:;"> <b ID = "v_6"> </b> </a>
<A href = "javascript:;"> <b ID = "v_7"> </b> </a>
<A href = "javascript:;"> <b ID = "v_8"> </b> </a>
</div>
</div>
<script>
Function getid (ID) {
Return document.GetelementByid (ID);
}
// Get the attribute style
Function GetStyle (ID, PROP) {
var obj = getid (ID);
var IE =!+"/V1"; // Simple judgment IE6 ~ 8
If (PROP == "Backgroundposition") {// IE6 ~ 8 is not compatible with BackgroundPosition to write, identify Backgroundpositionx/Y
if (ie) {{
Return obj.currenTSTYLE.BACKGROUNDPOSITIONX +" +Obj.CurrenTSTYLE.BACKROUNDPOSITIONY;
}
}
if (obj.currentStyle) {
Return obj.currenStyle [prop];
}
else if (Window.getComputedStyle) {
propropprop = prop.replace (/([[az])/g, "-$ 1");
proppropprop = prop.tolowercase ();
Return document.defaultView.getComputedStyle (obj, null) [prop];
}
}
var anslist = ["," "," "," "]; // Storage container
varcing = "-56px -92px, -100px -138px, -100px -92px, -3px -138px"; // Correct answer container
Var Flag = 0; // From the 0th to the 3rd to the 3rd, automatic comparison answers
var adbs = getid ("val_add").
Function Addans (VA) {
for (var I = 0; I <aNSLIST.LENGTH; I ++)
{{
if (Anslist [i] == "")
{{
Anslist [i] = va;
adbs [i] .style.cstext = "Background-Position:"+Anslist [i];
Flag = i;
Break;
}
}
if (flag == 3)
{{
if (Anslist == CRENT)
{{
alert ("The answer is correct!");
}
else
{{
alert ("Answer Error!");
dele ().
}
}
}
// Clear the original value
Function dele () {
Flag = 0;
for (var I = 0; I <adbs.Length; i ++)
adbs [i] .style.cstext = "";
anslist = ["," "," "," "];
}
// Clicks on the Jiugong lattice verification code
Function addevt (tab, ct, type) {{
var ctab = getid (tab) .GetelementsBytagname ("B");
// var cdiv = getid (ct) .GetelementsBytagname (Type);
for (var I = 0; I <CTAB.LENGTH; I ++)
{{
ctab [i] .onClight = Function std () {
//alert_alet (this.id);
var St = getstyle (this.id, "backgroundposition");
VAR Ststd = St.split (""); The space in the middle of the attribute is used as a separators such as: Background-Position: 215px 215px; GetStyle method The value is 215px 215px;
var st1, st2 = "";
/*-53px -36px, -56px -41px; after comparison of the answers of the Jiugong grid and the display selection, the answer x difference -3, y 5*/
st1 = PARSEINT (std [0] .replace ("px") -3;
ST2 = PARSEINT (std [1] .replace ("px") -5;
addans (ST1+"PX"+ST2+"PX");
}
}
}
addevt ("value_input");
</script>
</body>
</html>
Source: http://www.86y.org/art_detail.aspx? ID = 682