今日、私はBaidu検証コードが非常に興味深いものであることがわかったので、私はそれを模倣しました。
JSを使用して、4つの記事を選択した後に自動的に比較します。その後、プロンプト[答えは正しいです！ ]または[回答エラー！]、
将来、私はプログラムを作ります、そして私はそれを最初にあなたと共有します！
効果マップは次のとおりです。
ソースコードは次のとおりです。
次のようにコードコードをコピーします。
<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<Title> JS Imitation Baidu Post Bar検証コード特殊効果</title>
<style>
div {マージン：0;}
.com {246px;
.CLEARFIX：After {content： "。"。
.j_captcha_input {border：1px solid #ccc;}
.val_add b、.input_show span、。
.input_show {height：36px;}
.input_show span：0 0;
.val_add {border：solid #ccc;
.val_add border-right：solid #dddd;
.val_add .delete {background：url（http：//images/20140113213531521.png）No-Repeat 0 #ccc;
.en i {font-style：normal：＃ff0000;}
.val_input {width：190px：5px;}
val_ing：左側：54px： 、＃fff、＃f5f5f5）; fafafa）; progid：dimberagetransform.micro soft.gradient、startcolorsstr =＃fffffff、endcolorsstr =＃f5f5f5）;
.val_input {width：54px;
.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>
<div>
<div id = "val_add">
<b> </b>
<b> </b>
<b> </b>
<b> </b>
<b onclick = "dele（）;"> </b>
</div>
<div> <span> </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>
<スクリプト>
関数getID（ID）{
document.getElementByID（ID）を返します。
}
//属性スタイルを取得します
関数getStyle（id、prop）{
var obj = getId（id）;
var ie =！+"/v1"; //単純な判断IE6〜8
if（prop == "backgroundposition"）{// ie6〜8は、backgrouppospositionと互換性がありません。
if（ie）{{
Obj.CurrentStyle.BackGroundPositionX +" +obj.CurrentStyle.BackRoundPositionyを返します。
}
}
if（obj.currentstyle）{
obj.currenstyle [prop]を返します。
}
else if（window.getComputedStyle）{
propropprop = prop.replace（/（[[az]）/g、 " - $ 1"）;
proppropprop = prop.tolowercase（）;
Document.defaultView.getComputedStyle（obj、null）[prop];
}
}
var anslist = ["、" "、" ""、 "]; //ストレージコンテナ
varcing = "-56px -92px、-100px -138px、-100px -92px、-3px -138px";
var flag = 0; //
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 = "background-position："+anslist [i];
flag = i;
壊す;
}
}
if（flag == 3）
{{
if（anslist == crent）
{{
アラート（「答えは正しい！」）;
}
それ以外
{{
アラート（ "回答エラー！"）;
dele（）。
}
}
}
//元の値をクリアします
function dele（）{
フラグ= 0;
for（var i = 0; i <adbs.length; i ++）
adbs [i] .style.cstext = "";
anslist = ["、" "、" "、" "];
}
//ジュゴン格子検証コードをクリックします
関数addevt（tab、ct、type）{{
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"）;
</script>
</body>
</html>
出典：http：//www.86y.org/art_detail.aspx？