Heute habe ich gesehen, dass der Baidu -Verifizierungscode sehr interessant war, also habe ich ihn nachgeahmt.
Verwenden Sie JS, um es automatisch zu vergleichen, nachdem Sie 4 eins ausgewählt haben. Dann fordert auf [die Antwort ist korrekt! ] Oder [Antwortfehler!],
In Zukunft werde ich ein Programm machen und ich werde es zuerst mit Ihnen teilen!
Die Effektkarte lautet wie folgt:
Der Quellcode lautet wie folgt:
Kopieren Sie den Code -Code wie folgt:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" /> />
<titels> js Imitation Baidu Post -Bar -Verifizierungscode Spezialeffekt </title>
<Styles>
div {margin: 0;
.com {Breite: 246px;
.ClearFix: After {Inhalt: ".".
.j_captcha_input {border: 1px solid #ccc;}
.val_add b, .input_show span,.
.input_show {Höhe: 36px;
.Input_show span {Hintergrund: 0 0;
.val_add {Border: 1PX Solid #CCC;
.val_add B {Border-Light: 1PX Solid #ddd;
.val_add .delete {Hintergrund: URL (http: //images/20140113213531521.png) No-Repeat 0 #ccc;
.En i {Schriftstil: Normal;
.val_input {width: 190px;
. 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); Fafafa);
.Val_input AB {Breite: 54px;
.val_input #v_0 {Hintergrund -Posität: 0 -36px}
.val_input #v_1 {Hintergrund -Position: -53px -36px}/* -56px -41px;
.val_input #v_2 {Hintergrund -Position: -97px -36px}}
.val_input #v_3 {Hintergrund -Position: 0 -87px}
.val_input #v_4 {Hintergrund -Position: -53px -87px}}
.val_input #v_5 {Hintergrund -Position: -97px -87px}}
.val_input #v_6 {Hintergrund -Position: 0 -133px}
.val_input #v_7 {Hintergrund -Position: -53px -133px}}
.val_input #v_8 {Hintergrund -Position: -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> Kann es nicht klar sehen? </a> </div>
<Div> Klicken Sie auf den Text im Feld, um die Abbildung in der Abbildung oben <i> chinesische Zeichen oder Pinyin </i> entsprechende chinesische Zeichen </div> einzugeben. </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>
Funktion getId (id) {
Return document.getElementById (id);
}
// Erhalten Sie den Attributstil
Funktion getStyle (id, prop) {
var obj = getId (id);
var ie =!+"/v1";
If (prop == "Hintergrundinformat") {// IE6 ~ 8 ist nicht mit der Schreibuntersuchung kompatibel, identifizieren Sie Hintergrundpositionx/Y
if (dh) {{{{{{{{
Return obj.currentStyle.backgroundPositionx +" +obj.currentStyle.backroundPositiony;
}
}
if (obj.currentStyle) {
Rückgabe obj.currenstyle [prop];
}
sonst if (window.getComputedStyle) {
propropprop = prop.replace (/([[az])/g,--$ 1 ");
PropPropProp = prop.tolowerCase ();
Return document.defaultView.getComputedStyle (OBJ, NULL) [prop];
}
}
var anslist = [",", ",", ""]; // Speicherbehälter
varcing = "-56px -92px, -100px -138px, -100px -92px, -3px -138px";
Var flag = 0;
var adbs = getId ("val_add").
Funktion Addans (va) {
für (var i = 0; i <anslist.length; i ++)
{{{{
if (Anslist [i] == "")
{{{{
AnSlist [i] = va;
ADBS [i] .Style.cSTEXT = "Hintergrundposition:"+Anslist [i];
Flag = i;
Brechen;
}
}
if (Flag == 3)
{{{{
if (Anslist == Crent)
{{{{
Alarm ("Die Antwort ist richtig!");
}
anders
{{{{
alarm ("Antwortfehler!");
Dele ().
}
}
}
// den ursprünglichen Wert löschen
Funktion Dele () {
Flag = 0;
für (var i = 0; i <adbs.length; i ++)
adbs [i] .Style.cstext = "";
Anslist = [",", ",", ""];
}
// klickt auf den Jiugong -Gitterüberprüfungscode
Funktion addevt (tab, ct, type) {{{{{{{{{{{{{{{{{{{{{{
var ctab = getId (tab) .getElementsByTagName ("B");
// var cdiv = getId (ct) .getElementsByTagName (Typ);
für (var i = 0; i <ctab.length; i ++)
{{{{
ctab [i] .onclight = function std () {
// alert_alet (this.id);
var st = getStyle (this.id, "Hintergrundinformat");
Var stStd = St.Ssplit ("");
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>
Quelle: http://www.86y.org/art_detail.aspx?