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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
js对象的复制继承实例
Jan 10 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
JavaScript中如何调用Java方法
Sep 16 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
Python实现的快速排序算法详解
2017/08/01 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
统计岗位职责
2014/02/21 职场文书
会计的岗位职责
2014/03/15 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
社区活动总结
2015/02/04 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书