오늘, 나는 바이두 검증 코드가 매우 흥미 롭다는 것을 알았으므로 모방했습니다.
이 기사에서는 선택한 후 4 가지를 선택한 후 JS를 사용하여 자동으로 비교하십시오. 그런 다음 프롬프트 [대답이 정확합니다! ] 또는 [답변 오류!],
앞으로 나는 프로그램을 만들고 먼저 당신과 공유 할 것입니다!
효과 맵은 다음과 같습니다.
소스 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" /> />
<title> js 모방 바이두 포스트 바 검증 코드 특수 효과 </title>
<스타일>
div {마진 : 0;}
.com {너비 : 246px; 12px;
.ClearFix : {content : "."후에 : ";"; 블록; 높이 : 0; 둘 다;
.j_CAPTCHA_INPUT {테두리 : 1PX Solid #CCC;}
.val_add b, .input_show span.
.input_show {높이 : 36px;
.input_show span {parkge-pose : inline-black : 5px;
.val_add {Border : 1px solid #ccc;
.val_add b {1px 고체 #dddd;
.val_add .delete {배경 : url (http : //images/20140113213531521.png) no-Repeat 0 #ccc;
.en i {font 스타일 : 일반;#ff0000;}
.val_input {너비 : 190px;
val_input : 왼쪽; ,#fff,#f5f5f5); fafafa); 필터 : progid : dximagetransform.micro soft.gradient (gradientType = 0, startColorsstr =# fffffff, endcolorstr =# f5f5f5);
.Val_input AB {높이 : 40px;
.val_input #v_0 {배경 -양성 : 0 -36px}
.val_input #v_1 {배경 -파도 : -53px -36px}/*-56px -41px;
.val_input #v_2 {배경 -파도 : -97px -36px}
.val_input #v_3 {배경 -양성 : 0 -87px}
.val_input #v_4 {배경 -파도 : -53px -87px}
.val_input #v_5 {배경 -파도 : -97px -87px}
.val_input #v_6 {배경 -양성 : 0 -133px}
.val_input #v_7 {배경 -파도 : -53px -133px}
.val_input #v_8 {배경 -파도 : -97px -133px}
</스타일>
</head>
<body>
<div>
<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>
<cript>
함수 getId (id) {
return document.getElementById (id);
}
// 속성 스타일을 얻습니다
함수 getStyle (id, prop) {
var obj = getid (id);
var IE =!+"/v1"; // 간단한 판단 IE6 ~ 8
if (prop == "BackgroundPosition") {// IE6 ~ 8은 작성하여 BackgroundPosition과 호환되지 않습니다.
if (예 :) {{
return obj.currentStyle.backgroundPositionX +" +obj.currentStyle.BackRoundPositiony;
}
}
if (obj.currentStyle) {
return obj.currenstyle [prop];
}
else if (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";
var flag = 0; // 0에서 3 위에서 3 위, 자동 비교 답변
var adbs = getid ( "val_add").
기능 Addans (VA) {
for (var i = 0; i <anslist.length; i ++)
{{
if (anslist [i] == "")
{{
Anslist [i] = va;
adbs [i] .style.cstext = "배경 위치 :"+anslist [i];
플래그 = i;
부서지다;
}
}
if (flag == 3)
{{
if (anslist == crent)
{{
경고 ( "대답이 정확합니다!");
}
또 다른
{{
경고 ( "답변 오류!");
dele ().
}
}
}
// 원래 값을 지우십시오
함수 dele () {
플래그 = 0;
for (var i = 0; i <adbs.length; i ++)
adbs [i] .style.cstext = "";
anslist = [ "," "," "," "];
}
// Jiugong 격자 확인 코드를 클릭합니다
함수 addevt (탭, CT, 유형) {{
var ctab = getId (탭) .getElementsByTagName ( "b");
// var cdiv = getId (ct) .getElementsByTagName (type);
for (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");
</스크립트>
</body>
</html>
출처 : http://www.86y.org/art_detail.aspx?