欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js仿百度貼吧驗(yàn)證碼特效實(shí)例代碼

 更新時(shí)間:2014年01月16日 15:03:01   作者:  
這篇文章主要介紹了js仿百度貼吧驗(yàn)證碼特效實(shí)例代碼,有需要的朋友可以參考一下

今天看到有百度驗(yàn)證碼挺有意思的,就把它仿下來了。

利用JS實(shí)現(xiàn)當(dāng)選擇滿4個(gè)后自動(dòng)對(duì)比,本文中采用靜態(tài)對(duì)比的方法看你是否全部選擇對(duì)。然后提示【答案正確!】或【答案錯(cuò)誤!】,

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

效果圖如下:

源代碼如下:

復(fù)制代碼 代碼如下:

<!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仿百度貼吧驗(yàn)證碼特效</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(http://images/20140113213606506.png) 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(http://images/20140113213531521.png) 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 class="com"> 
      <div class="val_add clearfix" id="val_add"> 
          <b></b> 
          <b></b> 
          <b></b> 
          <b></b> 
          <b class="delete" title="清除" onclick="dele();"></b> 
      </div> 
      <div class="input_show"><span></span><a>看不清?</a></div> 
      <div class="ation">點(diǎn)擊框內(nèi)文字輸入上圖中<i>漢字或拼音</i>對(duì)應(yīng)漢字</div> 
      <div class="val_input clearfix" 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> 

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

    //獲取屬性樣式 
    function getStyle(id,prop){  
        var obj=getid(id); 
        var ie = !+"\v1";//簡(jiǎn)單判斷ie6~8 
        if(prop=="backgroundPosition"){//IE6~8不兼容backgroundPosition寫法,識(shí)別backgroundPositionX/Y 
            if(ie){      
                return obj.currentStyle.backgroundPositionX +" "+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 = ["","","",""];//儲(chǔ)存容器 
    var crent="-56px -92px,-100px -138px,-100px -92px,-3px -138px"; //正確答案容器 
    var flag=0;//從第0個(gè)開始算起到當(dāng)?shù)降?個(gè)時(shí)自動(dòng)對(duì)比答案 
    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("答案錯(cuò)誤!"); 
                dele(); 
            } 
        } 
    } 

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

    //綁定九宮格驗(yàn)證碼的點(diǎn)擊事件 
    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;經(jīng)對(duì)比九宮格與顯示選擇的答案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>


出處:http://www.86y.org/art_detail.aspx?id=682

相關(guān)文章

  • 微信小程序前后端數(shù)據(jù)交互的詳細(xì)圖文教程

    微信小程序前后端數(shù)據(jù)交互的詳細(xì)圖文教程

    這篇文章主要給大家介紹了關(guān)于微信小程序前后端數(shù)據(jù)交互的相關(guān)資料,通過小程序向后端發(fā)送請(qǐng)求,然后后端從數(shù)據(jù)庫(kù)獲取車源和求購(gòu)的數(shù)量反饋給小程序,最后將這兩個(gè)數(shù)據(jù)顯示出來,需要的朋友可以參考下
    2022-10-10
  • JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索

    JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索

    這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2024-01-01
  • 利用JS實(shí)現(xiàn)瀏覽器的title閃爍

    利用JS實(shí)現(xiàn)瀏覽器的title閃爍

    經(jīng)??梢钥匆姷膖itle里面的消息提示,下面是JS的一種實(shí)現(xiàn)方法,需要的朋友可以參考下
    2013-07-07
  • BootStrap實(shí)用代碼片段之一

    BootStrap實(shí)用代碼片段之一

    這篇文章主要為大家詳細(xì)介紹了BootStrap實(shí)用代碼片段之一,總結(jié)在使用BootStrap中遇到的問題,并記錄解決方法,感興趣的小伙伴們可以參考一下
    2016-03-03
  • 關(guān)于Javascript與iframe的那些事兒

    關(guān)于Javascript與iframe的那些事兒

    iframe 很多網(wǎng)站都在用,雖然方便開發(fā)與維護(hù)(可能同時(shí)有幾個(gè)頁(yè)面調(diào)用同一個(gè) iframe ),不過卻存在安全問題
    2013-07-07
  • javascript代碼調(diào)試之console.log 用法圖文詳解

    javascript代碼調(diào)試之console.log 用法圖文詳解

    對(duì)于開始學(xué)js的朋友可能不知道為什么用console.log,頁(yè)面中也看不到信息,對(duì)于這個(gè)console.log腳本之家小編特整理與介紹一下,方便需要的朋友
    2016-09-09
  • JavaScript對(duì)Cookie進(jìn)行讀寫操作實(shí)例

    JavaScript對(duì)Cookie進(jìn)行讀寫操作實(shí)例

    這篇文章主要介紹了JavaScript對(duì)Cookie進(jìn)行讀寫操作的方法,實(shí)例分析了javascript針對(duì)cookie的讀寫操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-07-07
  • 詳解js實(shí)現(xiàn)線段交點(diǎn)的三種算法

    詳解js實(shí)現(xiàn)線段交點(diǎn)的三種算法

    下面小編就最近學(xué)會(huì)的一些”求線段交點(diǎn)”的算法說一說, 希望對(duì)大家有所幫助。“求線段交點(diǎn)”是一種非?;A(chǔ)的幾何計(jì)算, 在很多游戲中都會(huì)被使用到。有需要的可以參考學(xué)習(xí)
    2016-08-08
  • javascript中的event loop事件循環(huán)詳解

    javascript中的event loop事件循環(huán)詳解

    這篇文章主要給大家介紹了關(guān)于javascript中event loop事件循環(huán)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • javascript讀取xml實(shí)現(xiàn)javascript分頁(yè)

    javascript讀取xml實(shí)現(xiàn)javascript分頁(yè)

    這篇文章主要介紹了javascript讀取xml數(shù)據(jù)對(duì)其實(shí)現(xiàn)javascript分頁(yè)效果,大家參考使用吧
    2013-12-12

最新評(píng)論