Hoy, vi que el código de verificación de Baidu era muy interesante, así que lo imité.
Use JS para compararlo automáticamente después de seleccionar 4. Luego indique [¡la respuesta es correcta! ] O [¡Error de respuesta!],
En el futuro, haré un programa, ¡y lo compartiré primero con ustedes!
El mapa de efectos es el siguiente:
El código fuente es el siguiente:
Copiar código del código de la siguiente manera:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<title> JS IMitation Baidu Post Bar Verificación Efecto especial </title>
<Estilo>
div {margen: 0;
.com {ancho: 246px;
.CLEARFIX: After {content: ".".
.j_captcha_input {border: 1px solid #ccc;}
.val_add b, .input_show span,.
.input_show {altura: 36px;
.Input_Show Spane {Panary de fondo: 0 0;
.val_add {border: 1px sólido #ccc;
.val_add b {border-right: 1px sólido #dddd;
.val_add .delete {fondo: url (http: //images/20140113213531521.png) No-repeat 0 0 #ccc;
.en I {Font-Style: Normal;
.val_input {ancho: 190px;
. ,#FFF,#F5F5F5); FAFAFA);
.val_input ab {ancho: 54px;
.val_input #v_0 {en segundo plano: 0 -36px}
.val_input #v_1 {en segundo plano: -53px -36px}/* -56px -41px;
.val_input #v_2 {en segundo plano: -97px -36px}
.val_input #v_3 {en segundo plano -pososidad: 0 -87px}
.val_input #v_4 {en segundo plano: -53px -87px}
.val_input #v_5 {en segundo plano: -97px -87px}
.val_input #v_6 {en segundo plano: 0 -133px}
.val_input #v_7 {en segundo plano: -53px -133px}
.val_input #v_8 {en segundo plano: -97px -133px}
</style>
</ablo>
<Body>
<div>
<div id = "val_add">
<b> </b>
<b> </b>
<b> </b>
<b> </b>
<b onClick = "dele ();"> </b>
</div>
<Viv> <span> </span> <a> ¿No puedes verlo con claridad?
<Div> Haga clic en el texto en el cuadro para ingresar la figura en la figura anterior <i> caracteres chinos o pines </i> caracteres chinos correspondientes </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>
Función getId (id) {
Return document.getElementById (id);
}
// Obtener el estilo de atributo
Función getStyle (id, prop) {
var obj = getId (id);
var ie =!+"/v1";
If (prop == "backgroundPosition") {// ie6 ~ 8 no es compatible con la posición de fondo para escribir, identificar backgroundPositionx/y
if (es decir) {{
Return obj.CurrentStyle.BackgroundPositionx +" +obj.currentStyle.backRoundPositiony;
}
}
if (obj.currentstyle) {
Regreso 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 = ["," "," "," "]; // contenedor de almacenamiento
varcing = "-56px -92px, -100px -138px, -100px -92px, -3px -138px";
Varilla var = 0;
var adbs = getId ("val_add").
Función Addans (VA) {
para (var i = 0; i <anslist.length; i ++)
{{
if (anslist [i] == "")
{{
Anslist [i] = va;
ADBS [i] .style.cstext = "Posición de fondo:"+anslist [i];
Bandera = i;
Romper;
}
}
if (bandera == 3)
{{
if (anslist == crent)
{{
alerta ("¡La respuesta es correcta!");
}
demás
{{
alerta ("¡Error de respuesta!");
dele ().
}
}
}
// Borrar el valor original
Función dele () {
Bandera = 0;
para (var i = 0; i <adbs.length; i ++)
ADBS [i] .style.cstext = "";
anSlist = ["," "," "," "];
}
// hace clic en el código de verificación Jiugong Lattice
Función addEvt (tab, ct, type) {{
var ctab = getId (tab) .getElementsBytagName ("b");
// var cdiv = getId (ct) .getElementsBytagName (type);
para (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 ("");
var st1, st2 = "";
/* -53px -36px, -56px -41px;
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>
Fuente: http://www.86y.org/art_detail.aspx?