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


Posted in Javascript onJanuary 16, 2014

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

利用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

Javascript 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 #Javascript
利用浏览器全屏api实现js全屏
Jan 16 #Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 #Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 #Javascript
javascript中验证大写字母、数字和中文
Jan 15 #Javascript
setTimeout自动触发一个js的方法
Jan 15 #Javascript
JS记录用户登录次数实现代码
Jan 15 #Javascript
You might like
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
js实现登录验证码
2016/12/22 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
Python实现截屏的函数
2015/07/26 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python微信公众号之关键词自动回复
2018/06/15 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
详解python中的异常捕获
2020/12/15 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Eclipse面试题
2014/03/22 面试题
民族团结先进个人材料
2014/02/05 职场文书
秋季运动会广播稿
2014/02/22 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
小学优秀班主任材料
2014/12/17 职场文书
会议主持词结束语
2015/07/03 职场文书
详解MySQL集群搭建
2021/05/26 MySQL