Hoje, vi que o código de verificação do Baidu era muito interessante, então eu o imitei.
Use o JS para compará -lo automaticamente após selecionar 4. Então solicite [a resposta está correta! ] Ou [Resposta Erro!],
No futuro, farei um programa e o compartilharei primeiro!
O mapa de efeitos é o seguinte:
O código -fonte é o seguinte:
Copie o código do código da seguinte forma:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<title> JS imitação Baidu Código de verificação da barra de postagem Efeito especial </ititle>
<Estilo>
div {margem: 0;
.com {largura: 246px;
.Clearfix: após {content: ".".
.j_captcha_input {borda: 1px sólido #ccc;}
.val_add b, .input_show span.
.input_show {altura: 36px;
.Input_show span {Posidade de fundo: 0 0;
.val_add {borda: 1px sólido #ccc;
.Val_add b {Border-right: 1px Solid #DDDD;
.Val_add .Delete {Background: URL (http: //images/20140113213531521.png) No-repetir 0 0 #ccc;
.en i {estilo de fonte: normal;
.Val_Input {Width: 190px;
Val_inpra a {Display: Bloco; ,#Fff,#f5f5f5); FAFAFA);
.val_input ab {largura: 54px;
.Val_Input #v_0 {Background -Posity: 0 -36px}
.VAL_INPUT #V_1 {Posidade de fundo: -53px -36px}/* -56px -41px;
.Val_Input #V_2 {Posidade de fundo: -97px -36px}
.Val_Input #V_3 {Background -Posity: 0 -87px}
.Val_Input #V_4 {Posidade de fundo: -53px -87px}
.Val_Input #V_5 {Posidade de fundo: -97px -87px}
.Val_input #V_6 {Background -Posity: 0 -133px}
.Val_input #V_7 {Posidade de fundo: -53px -133px}
.Val_Input #V_8 {Posidade de fundo: -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> Não consigo ver claramente?
<div> Clique no texto na caixa para inserir a figura na figura acima <i> caracteres chineses ou pinyin </i> caracteres chineses correspondentes </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>
<Cript>
Função getId (id) {
Retornar document.getElementById (id);
}
// Obtenha o estilo de atributo
Função getStyle (id, prop) {
var obj = getId (id);
var ie =!+"/v1";
If (prop == "BackgroundPosition") {// ie6 ~ 8 não é compatível com o BackgroundPosition para escrever, identifique BackgroundPositionX/y
if (ie) {{
Retornar obj.currentstyle.backgroundPositionX +" +obj.currentstyle.backRoundPositiony;
}
}
if (obj.currentstyle) {
Retornar obj.currenStyle [prop];
}
else if (window.getComputedStyle) {
proPropProp = Prop.replace (/([[AZ])/G, "-$ 1");
proPPROPPROP = Prop.TolowerCase ();
Retornar document.defaultView.getComputedStyle (obj, null) [prop];
}
}
var ANSLIST = ["," "," "," "]; // contêiner de armazenamento
varcing = "-56px -92px, -100px -138px, -100px -92px, -3px -138px";
Var Flag = 0;
var adbs = getId ("val_add").
Função addans (va) {
for (var i = 0; i <ANSLIST.Length; i ++)
{{
if (Anslist [i] == "")
{{
ANSLIST [i] = VA;
adbs [i] .style.cstext = "Posição de fundo:"+Anslist [i];
Bandeira = i;
Quebrar;
}
}
if (sinalizador == 3)
{{
if (Anslist == crent)
{{
alerta ("A resposta está correta!");
}
outro
{{
alerta ("Erro de resposta!");
dele ().
}
}
}
// limpe o valor original
Function deLe () {
Sinalizador = 0;
for (var i = 0; i <adbs.length; i ++)
adbs [i] .style.cstext = "";
ANSLIST = ["," "," "," "];
}
// clique no código de verificação da treliça Jiugong
Função addEvt (tab, ct, tipo) {{
var ctab = getId (tab) .getElementsByTagName ("b");
// var cdiv = getId (ct) .getElementsByTagName (tipo);
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 ("");
var st1, st2 = "";
/* -53px -36px, -56px -41px;
ST1 = parseint (std [0] .Place ("px") -3;
ST2 = parseint (std [1] .place ("px") -5;
addans (st1+"px"+st2+"px");
}
}
}
addEvt ("value_input");
</script>
</body>
</html>
Fonte: http://www.86y.org/art_detail.aspx?