js 모방 Baidu Tieba 인증 코드 특수 효과 예제 code_javascript 기술-JS 튜토리얼-php.cn

js 모방 Baidu Tieba 인증 코드 특수 효과 예제 code_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:03:39

원래의

913명이 탐색했습니다.

오늘 바이두 인증코드가 너무 재미있어서 복사해 봤습니다.

JS를 사용하여 4개 항목을 선택한 후 자동 비교를 구현합니다. 이 글에서는 올바른 항목을 모두 선택했는지 확인하기 위해 정적 비교 방법을 사용합니다. 그러면 [정답이 맞았습니다! ] 또는 [오답입니다!],

앞으로 시간이 나면 프로그램을 만들어서 먼저 여러분과 공유하겠습니다!

렌더링은 다음과 같습니다.

js 모방 Baidu Tieba 인증 코드 특수 효과 예제 code_javascript 기술

소스코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

    js仿百度贴吧验证码特效

看不清?

点击框内文字输入上图中汉字或拼音对应汉字

    <스크립트>

    function getid(id) {
        return document.getElementById(id);
    }

    //获取属性样式
    function getStyle(id,prop){
        var obj=getid(id);
        var 즉 = ! "v1";//简单判断ie6~8
        if(prop=="BackgroundPosition"){//IE6~8不兼容BackgroundPosition写법，识别BackgroundPositionX/Y
           if(ie){
                반품 obj.currentStyle.BackgroundPositionX " " obj.currentStyle.BackgroundPositionY;
            }
        }
        if (obj.currentStyle) {
            return obj.currentStyle[prop];
        }
        else if (window.getCompulatedStyle) {
            proppropprop = prop.replace (/([A-Z])/g, "-$1");
            proppropprop = prop.toLowerCase ();
             return document.defaultView.getComputeStyle(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").getElementsB y태그이름("b" );
    함수 추가 기능(va){
        for(var i=0;i        {
            if(anslist[i]=="")
            {
                anslist[i]=va;
                adbs[i].style.cssText="배경 위치:" anslist[i];
                플래그=i;
                휴식;
           }
        }
        if(flag==3)
        {
            if(anslist==crent)
            {
                Alert("答案正确!");
            }
            else
            {
               Alert("答案错误!");
                dele();
            }
        }
    }

    //清除原有值
    function dele(){
        flag=0;
        for(var i=0;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 ){                                                                          );//속성 중간 다음과 같은 구분 기호로 공백이 사용됩니다. -41px; Jiugongge x와 표시된 선택된 답변의 차이는 -3이고 y 차이는 -5*/
             st1=parseInt(std[0].replace("px"))-3; "px"))-5; addEvt("val_input")

>출처: http://www.86y.org/art_detail.aspx?id=682