js仿百度貼吧驗證碼特效實例代碼

2024-05-06 16:00:10

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js仿百度貼吧驗證碼特效實例代碼，有需要的朋友可以參考一下

今天看到有百度驗證碼挺有意思的，就把它仿下來了。

利用JS實現當選擇滿4個后自動對比，本文中采用靜態對比的方法看你是否全部選擇對。然后提示【答案正確！】或【答案錯誤!】，

以后有空再去做成程序，先分享給大家！

效果圖如下：

源代碼如下：

復制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js仿百度貼吧驗證碼特效</title>
    <style>
    div{margin:0;padding:0;}
    .com{width:246px;font-size:12px;padding:12px;border:1px solid #ccc;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}

    .j_captcha_input{border:1px solid #ccc;}

    .val_add b,.input_show span,.val_input a b{background:url() no-repeat -500px -500px;}

    .input_show{height:36px;margin-bottom:5px;}
    .input_show span{background-position:0 0;display: inline-block;height: 36px;margin-right: 5px;vertical-align: middle;width: 150px;}

    .val_add{border:1px solid #CCC;word-break: break-all;margin:0 20px 5px 0;}
    .val_add b{border-right:1px solid #ddd;height: 34px;width: 45px;float:left;}

    .val_add .delete{background:url() no-repeat 0 0 #ccc;border-right:0 none;cursor:pointer;width: 40px;}

    .ation i{font-style:normal;color:#ff0000;}

    .val_input{width:190px;margin-top:5px;}
    .val_input a{display:block;float:left;margin:0 5px 5px 0;width:54px;height:40px;border:1px solid #e0e0e0;border-bottom-color:#bfbfbf;outline:0;background:-ms-linear-gradient(top,#fff,#f5f5f5);background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f5f5f5));background:-moz-linear-gradient(top,#fff,#fafafa);filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#F5F5F5);zoom:1}

    .val_input a b{width:54px;height:40px;cursor:pointer;zoom:1;display:block;}

    .val_input #v_0{background-position:0 -36px}
    .val_input #v_1{background-position:-53px -36px}/*-56px -41px;*/
    .val_input #v_2{background-position:-97px -36px}
    .val_input #v_3{background-position:0 -87px}
    .val_input #v_4{background-position:-53px -87px}
    .val_input #v_5{background-position:-97px -87px}
    .val_input #v_6{background-position:0 -133px}
    .val_input #v_7{background-position:-53px -133px}
    .val_input #v_8{background-position:-97px -133px}
    </style>
    </head>
    <body>
    <div>
      <div>
          <b></b>
          <b></b>
          <b></b>
          <b></b>
          <b "+obj.currentStyle.backgroundPositionY;
            }
        }
        if (obj.currentStyle) {
            return obj.currentStyle[prop];
        }
        else if (window.getComputedStyle) {
            proppropprop = prop.replace (/([A-Z])/g, "-$1");
            proppropprop = prop.toLowerCase ();
             return document.defaultView.getComputedStyle (obj,null)[prop];
        }
    }

    var anslist = ["","","",""];//儲存容器
    var crent="-56px -92px,-100px -138px,-100px -92px,-3px -138px"; //正確答案容器
    var flag=0;//從第0個開始算起到當到第3個時自動對比答案
    var adbs=getid("val_add").getElementsByTagName("b");
    function addans(va){
        for(var i=0;i<anslist.length;i++)
        {
            if(anslist[i]=="")
            {
                anslist[i]=va;
                adbs[i].style.cssText="background-position:"+anslist[i];
                flag=i;
                break;
            }
        }
        if(flag==3)
        {
            if(anslist==crent)
            {
                alert("答案正確!");
            }
            else
            {
                alert("答案錯誤!");
                dele();
            }
        }
    }

    //清除原有值
    function dele(){
        flag=0;
        for(var i=0;i<adbs.length;i++)
            adbs[i].style.cssText="";
        anslist = ["","","",""];
    }

    //綁定九宮格驗證碼的點擊事件
    function addEvt(tab,ct,type){
        var ctab = getid(tab).getElementsByTagName("b");
        //var cdiv = getid(ct).getElementsByTagName(type);
        for(var i = 0;i<ctab.length;i++)
        {
            ctab[i].onclick =function std(){
                //alert(this.id);
                var st=getStyle(this.id,"backgroundPosition");
                var ststd=st.split(" ");//屬性中間的空間作為分隔符如：background-position:215px 215px; getStyle方法取得值是215px 215px;
                var st1,st2="";
                /*-53px -36px,-56px -41px;經對比九宮格與顯示選擇的答案x差-3，y差-5*/
                st1= parseInt(std[0].replace("px"))-3;
                st2= parseInt(std[1].replace("px"))-5;
                addans(st1+"px "+st2+"px");
            }

        }
    }
    addEvt("val_input");
    </script>
    </body>
    </html>