วันนี้ฉันเห็นว่ารหัสการตรวจสอบ Baidu นั้นน่าสนใจมากดังนั้นฉันจึงเลียนแบบมัน
ใช้ JS เพื่อเปรียบเทียบโดยอัตโนมัติหลังจากเลือก 4 รายการ จากนั้นแจ้ง [คำตอบถูกต้อง! ] หรือ [คำตอบข้อผิดพลาด!],
ในอนาคตฉันจะสร้างโปรแกรมและฉันจะแบ่งปันกับคุณก่อน!
แผนที่เอฟเฟกต์มีดังนี้:
ซอร์สโค้ดมีดังนี้:
คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<title> JS Emitation Baidu Post Bar Verification Code Expact Effects </title>
<style>
div {margin: 0;
.com {ความกว้าง: 246px;
.ClearFix: หลังจาก {เนื้อหา: "."
.j_captcha_input {border: 1px solid #ccc;}
.VAL_ADD B, .Input_show Span,
.input_show {ความสูง: 36px;
.input_show Span {พื้นหลัง: 0 0;
.VAL_ADD {Border: 1PX Solid #CCC;
.VAL_ADD B {Border-Right: 1PX Solid #DDDD;
.VAL_ADD .DELETE {พื้นหลัง: URL (http: //images/20140113213531521.png) ไม่มีการทำซ้ำ 0 0 #ccc;;}
.EN I {รูปแบบฟอนต์: ปกติ:#FF0000;}
.val_input {Width: 190px;
. ,#fff,#f5f5f5); Fafafa);
.VAL_INPUT AB {ความกว้าง: 54PX;
.VAL_INPUT #V_0 {พื้นหลัง -Posity: 0 -36PX}
.VAL_INPUT #V_1 {พื้นหลัง -POSICE: -53PX -36PX}/* -56PX -41PX;
.VAL_INPUT #V_2 {พื้นหลัง -POSICES: -97PX -36PX}
.VAL_INPUT #V_3 {พื้นหลัง -Posity: 0 -87PX}
.VAL_INPUT #V_4 {พื้นหลัง -POSICES: -53PX -87PX}
.VAL_INPUT #V_5 {พื้นหลัง -POSICES: -97PX -87PX}
.VAL_INPUT #V_6 {พื้นหลัง -Posity: 0 -133px}
.VAL_INPUT #V_7 {พื้นหลัง -POSICES: -53PX -133PX}
.VAL_INPUT #V_8 {พื้นหลัง -POSICES: -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> </span> <a> ไม่เห็นชัดเจน? </a> </div>
<div> คลิกข้อความในช่องเพื่อป้อนรูปในรูปด้านบน <i> อักขระจีนหรือพินอิน </i> อักขระจีนที่สอดคล้องกัน </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>
ฟังก์ชั่น getId (id) {
ส่งคืน document.getElementById (id);
-
// รับสไตล์แอตทริบิวต์
ฟังก์ชั่น getStyle (id, prop) {
var obj = getId (id);
var ie =!+"/v1";
if (prop == "backgroundPosition") {// ie6 ~ 8 ไม่เข้ากันกับพื้นหลังในการเขียนระบุพื้นหลัง positionx/y
ถ้า (เช่น) {{
ส่งคืน obj.currentstyle.backgroundpositionx +" +obj.currentstyle.backRoundPositiony;
-
-
if (obj.currentstyle) {
ส่งคืน obj.currenstyle [prop];
-
อื่นถ้า (window.getComputedStyle) {
propropprop = prop.replace (/([[AZ])/g, "-$ 1");
propPropProp = prop.toLowerCase ();
ส่งคืน Document.defaultView.getComputedStyle (OBJ, NULL) [Prop];
-
-
var anslist = ["," "," "," "]; // container storage
varcing = "-56px -92px, -100px -138px, -100px -92px, -3px -138px";
var flag = 0;
var adbs = getId ("val_add")
ฟังก์ชัน Addans (VA) {
สำหรับ (var i = 0; i <anslist.length; i ++)
-
if (anslist [i] == "")
-
anslist [i] = va;
adbs [i] .style.cstext = "ตำแหน่งพื้นหลัง:"+anslist [i];
ธง = i;
หยุดพัก;
-
-
ถ้า (ธง == 3)
-
if (anslist == crent)
-
การแจ้งเตือน ("คำตอบถูกต้อง!");
-
อื่น
-
การแจ้งเตือน ("คำตอบข้อผิดพลาด!");
Dele ()
-
-
-
// ล้างค่าดั้งเดิม
ฟังก์ชั่น dele () {
ธง = 0;
สำหรับ (var i = 0; i <adbs.length; i ++)
adbs [i] .style.cstext = "";
anslist = ["," "," "," "];
-
// คลิกที่รหัสการตรวจสอบ Lattice Jiugong
ฟังก์ชั่น addevt (แท็บ, ct, type) {{
var ctab = getId (tab) .getElementsByTagname ("B");
// var cdiv = getId (ct) .getElementsByTagname (ประเภท);
สำหรับ (var i = 0; i <ctab.length; i ++)
-
ctab [i] .onclight = ฟังก์ชั่น 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] .retplace ("px") -3;
st2 = parseint (std [1]. reflace ("px") -5;
Addans (ST1+"PX"+ST2+"PX");
-
-
-
Addevt ("value_input");
</script>
</body>
</html>
ที่มา: http://www.86y.org/art_detail.aspx?