Aujourd'hui, j'ai vu que le code de vérification de Baidu était très intéressant, alors je l'ai imité.
Utilisez JS pour le comparer automatiquement après avoir sélectionné 4. Puis invite [la réponse est correcte! ] Ou [Réponse Erreur!],
À l'avenir, je ferai un programme et je le partagerai avec vous d'abord!
La carte d'effet est la suivante:
Le code source est le suivant:
Copier le code du code comme suit:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" /> />
<Title> JS imitation baidu post bar code de vérification Effet spécial </Title>
<Style>
div {margin: 0;
.com {largeur: 246px;
.ClearFix: après {Content: ".".
.j_captcha_input {border: 1px solide #ccc;}
.VAL_ADD B, .Input_show Span,.
.input_show {hauteur: 36px;
.input_show Spande {arrière-plan: 0 0;
.Val_add {Border: 1px solide #ccc;
.VAL_ADD B {Border-Right: 1px solide #dddd;
.VAL_ADD .Delete {Background: URL (http: //images/20140113213531521.png) sans repaire 0 0 #ccc;};
.en i {Style de police: normal;
.Val_input {Largeur: 190px;
. , # Fff, # f5f5f5); FAFAFA);
.Val_input ab {largeur: 54px;
.val_input # v_0 {background -posité: 0 -36px}
.Val_input # v_1 {arrière-arrière-arrière: -53px -36px} / * - 56px -41px;
.Val_input # v_2 {arrière-arrière-arrière: -97px -36px}
.val_input # v_3 {background -Posité: 0 -87px}
.val_input # v_4 {arrière-arrière-arrière: -53px -87px}
.Val_input # v_5 {arrière-arrière-arrière: -97px -87px}
.val_input # v_6 {background -posité: 0 -133px}
.val_input # v_7 {arrière-arrière-arrière: -53px -133px}
.Val_input # v_8 {arrière-plan: -97px -133px}
</ style>
</ head>
<body>
<div>
<div id = "val_add">
<b> </b>
<b> </b>
<b> </b>
<b> </b>
<b onclick = "dele ();"> </b>
</div>
<div> <pan> </pan> <a> Vous ne le voyez pas clairement?
<div> Cliquez sur le texte dans la case pour entrer la figure de la figure ci-dessus <i> Caractéristiques chinoises ou pinyin </i> Caractéristiques chinoises correspondantes </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>
Fonction getID (id) {
Return document.getElementById (id);
}
// Obtenez le style d'attribut
Function getStyle (id, prop) {
var obj = getID (id);
var ie =! + "/ v1";
If (prop == "backgroundPosition") {// ie6 ~ 8 n'est pas compatible avec BackgroundPosition to Write, identifiez BackgroundPositionX / Y
if (ie) {{
Return obj.currentStyle.backgroundPositionx + "+ obj.currentStyle.backroundPositiony;
}
}
if (obj.currentStyle) {
Retour obj.currenstyle [prop];
}
else if (window.getCompuledStyle) {
Proproposprop = prop.replace (/ ([[az]) / g, "- 1 $");
PropPropProp = Prop.TolowerCase ();
Return document.defaultView.getCompuledStyle (obj, null) [PROP];
}
}
var anslist = ["," "," "," "]; // conteneur de stockage
varcing = "-56px -92px, -100px -138px, -100px -92px, -3px -138px";
Var Flag = 0;
var adbs = getID ("val_add").
Fonction addans (va) {
pour (var i = 0; i <anslist.length; i ++)
{{
if (anslist [i] == "")
{{
Anslist [i] = va;
adbs [i] .style.cstext = "Position de fond:" + Anslist [i];
Drapeau = i;
Casser;
}
}
si (drapeau == 3)
{{
if (anslist == crent)
{{
alerte ("La réponse est correcte!");
}
autre
{{
alert ("Réponse Erreur!");
dele ().
}
}
}
// effacer la valeur d'origine
Fonction dele () {
Drapeau = 0;
pour (var i = 0; i <adbs.length; i ++)
adbs [i] .style.cstext = "";
ANSList = ["," "," "," "];
}
// clique sur le code de vérification du réseau Jiugong
Fonction addevt (tab, ct, type) {{{
var ctab = getID (tab) .getElementsByTagName ("b");
// var cDiv = getID (ct) .getElementsByTagName (type);
pour (var i = 0; i <ctab.length; i ++)
{{
ctab [i] .OnClight = fonction 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");
</cript>
</docy>
</html>
Source: http://www.86y.org/art_detail.aspx?