اليوم ، رأيت أن رمز التحقق من Baidu كان مثيرًا للاهتمام للغاية ، لذلك قمت بتقليده.
استخدم JS لمقارنتها تلقائيًا بعد اختيار 4 منها. ثم موجه [الجواب صحيح! ] أو [خطأ الإجابة!] ،
في المستقبل ، سأقوم بعمل برنامج ، وسأشاركه معك أولاً!
خريطة التأثير هي كما يلي:
رمز المصدر كما يلي:
نسخ رمز رمز على النحو التالي:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" /> />
<title> JS Imitation Baidu Post Bar Code Code effect </title>
<style>
div {margin: 0 ؛
.com
.clearfix: بعد {المحتوى: ".".
.J_CAPTCHA_INPUT {الحدود: 1PX Solid #CCC ؛}
.val_add b ، .input_show span ،.
.inpt_show {الارتفاع: 36px ؛
.
.val_add {الحدود: 1px Solid #CC ؛
.val_add b {الحدود: 1px solid #ddd ؛
.val_add .delete {background: url (http: //images/20140113213531521.png) no-repeat 0 0 #ccc ؛
.
.val_inpt {العرض: 190 بكسل ؛
. 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 #v_0 {background -posity: 0 -36px}
.val_input #v_1 {background -posity: -53px -36px}/* -56px -41px ؛
.val_input #v_2 {background -posity: -97px -36px}
.val_input #v_3 {background -posity: 0 -87px}
.val_input #v_4 {background -posity: -53px -87px}
.val_input #v_5 {background -posity: -97px -87px}
.val_input #v_6 {background -posity: 0 -133px}
.val_input #v_7 {background -posity: -53px -133px}
.val_input #v_8 {background -posity: -97px -133px}
</style>
</head>
<body>
<viv>
<div id = "val_add">
<b> </b>
<b> </b>
<b> </b>
<b> </b>
<B onClick = "dele () ؛"> </b>
</div>
<Div> <span> </span> <a> لا يمكنك رؤيته بوضوح؟
<div> انقر على النص في المربع لإدخال الشكل في الشكل أعلاه <i> الأحرف الصينية أو Pinyin </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) {
return document.getElementById (id) ؛
}
// احصل على نمط السمة
وظيفة getStyle (id ، prop) {
var obj = getId (id) ؛
var ie =!+"/v1" ؛
if (prop == "BackgroundPosition") {// ie6 ~ 8 غير متوافق مع BackgroundPosition للكتابة ، حدد BackgroundPositionx/y
إذا (أي) {{
return obj.currentstyle.backgroundposition +" +obj.currentStyle.BackRoundPositiony ؛
}
}
if (obj.currentStyle) {
إرجاع obj.currenstyle [prop] ؛
}
وإلا إذا (window.getComputedStyle) {
propropprop = prop.replace (/([[[az])/g ، "-$ 1") ؛
proppropprop = prop.ToLowerCase () ؛
return document.defaultView.getComputedStyle (OBJ ، null) [prop] ؛
}
}
var anslist = ["،" "،" "،" "] ؛ // حاوية التخزين
varcing = "-56px -92px ، -100px -138px ، -100px -92px ، -3px -138px" ؛
علامة فار = 0 ؛
var adbs = getId ("val_add").
وظيفة addans (va) {
لـ (var i = 0 ؛ i <anslist.length ؛ i ++)
{{
إذا (Anslist [i] == "")
{{
Anslist [i] = va ؛
adbs [i]
العلم = أنا ؛
استراحة؛
}
}
إذا (العلم == 3)
{{
if (Anslist == crent)
{{
تنبيه ("الجواب صحيح!") ؛
}
آخر
{{
تنبيه ("خطأ الإجابة!") ؛
DELE ().
}
}
}
// امسح القيمة الأصلية
وظيفة dele () {
العلم = 0 ؛
لـ (var i = 0 ؛ i <adbs.length ؛ i ++)
adbs [i] .style.cstext = "" ؛
Anslist = ["،" "،" "،" "] ؛
}
// ينقر على رمز التحقق من شعرية Jiugong
وظيفة addevt (علامة التبويب ، ct ، اكتب) {{
var ctab = getId (tab) .getElementsByTagName ("b") ؛
// var cdiv = getId (ct) .getElementsByTagName (type) ؛
لـ (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>
المصدر: http://www.86y.org/art_detail.aspx؟