Hari ini, saya melihat bahwa kode verifikasi Baidu sangat menarik, jadi saya meniru itu.
Gunakan JS untuk secara otomatis membandingkannya setelah memilih 4 orang. Kemudian minta [jawabannya benar! ] Atau [kesalahan jawaban!],
Di masa depan, saya akan membuat program, dan saya akan membagikannya dengan Anda terlebih dahulu!
Peta efeknya adalah sebagai berikut:
Kode sumber adalah sebagai berikut:
Salin kode kode sebagai berikut:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" /> />
<title> js imitasi baidu post batang kode verifikasi efek khusus </iteme>
<tyle>
Div {margin: 0;
.com {Width: 246px;
.Clearfix: setelah {konten: ".". "
.j_captcha_input {border: 1px solid #ccc;}
.val_add b, .input_show span,.
.input_show {height: 36px; margin-bottom: 5px;}
.input_show span {latar belakang: 0 0;
.val_add {border: 1px solid #ccc;
.val_add B {border-right: 1px solid #dddd;
.val_add .delete {latar belakang: url (http: //images/20140113213531521.png) no-repeat 0 0 #ccc;
.en i {font-style: normal;
.val_input {width: 190px;
Val_input A {blokir: marganya; ,#Fff,#f5f5f5); FAFAFA);
.val_input ab {width: 54px;
.val_input #v_0 {latar belakang -positas: 0 -36px}
.val_input #v_1 {latar belakang -positas: -53px -36px}/* -56px -41px;
.val_input #v_2 {latar belakang -positas: -97px -36px}
.val_input #v_3 {latar belakang -positas: 0 -87px}
.val_input #v_4 {latar belakang -positas: -53px -87px}
.val_input #v_5 {latar belakang -positas: -97px -87px}
.val_input #v_6 {latar belakang -positas: 0 -133px}
.val_input #v_7 {latar belakang -positas: -53px -133px}
.val_input #v_8 {latar belakang -positas: -97px -133px}
</tyle>
</head>
<body>
<div>
<Div id = "val_add">
<b> </b>
<b> </b>
<b> </b>
<b> </b>
<B onClick = "dele ();"> </b>
</div>
<vers> <span> </span> <a> Tidak dapat melihatnya dengan jelas?
<div> Klik teks di dalam kotak untuk memasukkan gambar pada gambar di atas <i> karakter Cina atau pinyin </i> Karakter Cina yang sesuai </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>
Fungsi getId (id) {
Return document.getElementById (id);
}
// Dapatkan gaya atribut
Fungsi getStyle (id, prop) {
var obj = getId (id);
var ie =!+"/v1"; // penilaian sederhana IE6 ~ 8
If (prop == "latar belakang") {// ie6 ~ 8 tidak kompatibel dengan latar belakang untuk menulis, identifikasi latar belakangPositionx/y
if (yaitu) {{
Kembalikan obj.currentstyle.backgroundpositionx +" +obj.currentstyle.backroundpositiony;
}
}
if (obj.currentstyle) {
Kembalikan obj.currenStyle [prop];
}
lain 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";
Var Flag = 0; // dari tanggal 0 ke 3 ke 3, jawaban perbandingan otomatis
var adbs = getId ("val_add").
Fungsi addans (va) {
untuk (var i = 0; i <anslist.length; i ++)
{{
if (anslist [i] == "")
{{
Anslist [i] = va;
adbs [i] .style.cstext = "posisi latar belakang:"+anslist [i];
Bendera = i;
Merusak;
}
}
if (flag == 3)
{{
if (anslist == crent)
{{
peringatan ("Jawabannya benar!");
}
kalau tidak
{{
peringatan ("Kesalahan jawaban!");
dele ().
}
}
}
// Bersihkan nilai aslinya
Fungsi dele () {
Bendera = 0;
untuk (var i = 0; i <adbs.length; i ++)
adbs [i] .style.cstext = "";
anslist = ["," "," "," "];
}
// Klik pada kode verifikasi kisi Jiugong
Fungsi addevt (tab, ct, type) {{
var ctab = getId (tab) .geteLementsByTagname ("b");
// var cdiv = getId (ct) .geteLementsByTagname (type);
untuk (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>
Sumber: http://www.86y.org/art_detail.aspx?