杰晶网络

js仿百度贴吧验证码特效实例代码
网络编程 2024/11/9 佚名
3 2

今天看到有百度验证码挺有意思的，就把它仿下来了。

利用JS实现当选择满4个后自动对比，本文中采用静态对比的方法看你是否全部选择对。然后提示【答案正确！】或【答案错误!】，

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

效果图如下：

js仿百度贴吧验证码特效实例代码

源代码如下：

复制代码 代码如下:
<!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(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">点击框内文字输入上图中<i>汉字或拼音</i>对应汉字</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";//简单判断ie6~8 
        if(prop=="backgroundPosition"){//IE6~8不兼容backgroundPosition写法，识别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 = ["","","",""];//储存容器 
    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>


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

标签：
百度贴吧,验证码
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“js仿百度贴吧验证码特效实例代码”
暂无“js仿百度贴吧验证码特效实例代码”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网