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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
JavaScript定时器使用方法详解
Mar 26 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP代码优化的53个细节
2014/03/03 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python中进程和线程的区别详解
2017/10/29 Python
代码分析Python地图坐标转换
2018/02/08 Python
python中的字符串内部换行方法
2018/07/19 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
生活小常识广播稿
2015/08/19 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server