飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

5款实用的jQuery验证码插件

时间:2022-03-14  作者:1463069300limingzhi  

效果图

 文档结构

HTML

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>5款实用的jQuery验证码插件</title>
        <link rel="stylesheet" type="text/css" href="css/域名" />
    </head>

    <body>
        <div class="top">
            <div class="Northwest">
                <div class="spjz">
                    <h3>普通验证码</h3>
                    <div id="GeneralVerificationCode"></div>
                    <button type="button" id="check-btn" class="verify-btn">确定</button>
                </div>
            </div>
            <div class="North"></div>
            <div class="Northeast">
                <div class="spjz">
                    <h3>计算验证码</h3>
                    <div id="ComputationalVerificationCode"></div>
                    <button type="button" id="check-btn2" class="verify-btn">确定</button>
                </div>
            </div>
            <div class="west"></div>
            <div class="centre">
                <div class="spjz">
                    <h3>滑动图片验证码</h3>
                    <div id="SlidingPictureVerificationCode"></div>
                </div>
            </div>
            <div class="east"></div>
            <div class="Southwest">
                <div class="spjz">
                    <h3>滑动验证码</h3>
                    <div id="SlidingVerificationCode"></div>
                </div>
            </div>
            <div class="South"></div>
            <div class="Southeast">
                <div class="spjz">
                    <h3>点选验证码</h3>
                    <div id="Click-onVerificationCode"></div>
                </div>
            </div>
        </div>
        <div class="bottom">

        </div>

        <script type="text/javascript" src="js/域名"></script>
        <script type="text/javascript" src="js/域名"></script>
        <script type="text/javascript">
            //普通验证码 GeneralVerificationCode
            $(\\'#GeneralVerificationCode\\').codeVerify({
                type: 1,
                width: \\'100%\\',
                height: \\'50px\\',
                fontSize: \\'30px\\',
                codeLength: 6,
                btnId: \\'check-btn\\',
                ready: function() {},
                success: function() {
                    alert(\\'验证匹配!\\');
                },
                error: function() {
                    alert(\\'验证码不匹配!\\');
                }
            });
            //计算验证码 ComputationalVerificationCode
            $(\\'#ComputationalVerificationCode\\').codeVerify({
                type: 2,
                figure: 100, //位数,仅在type=2时生效
                arith: 0, //算法,支持加减乘,不填为随机,仅在type=2时生效
                width: \\'100%\\',
                height: \\'50px\\',
                fontSize: \\'30px\\',
                btnId: \\'check-btn2\\',
                ready: function() {},
                success: function() {
                    alert(\\'验证匹配!\\');
                },
                error: function() {
                    alert(\\'验证码不匹配!\\');
                }
            });
            //滑动图片验证码 SlidingPictureVerificationCode
            $(\\'#SlidingPictureVerificationCode\\').slideVerify({
                type: 2, //类型
                vOffset: 5, //误差量,根据需求自行调整
                vSpace: 5, //间隔
                imgName: [\\'域名\\', \\'域名\\'],
                imgSize: {
                    width: \\'100%\\',
                    height: \\'173px\\',
                },
                blockSize: {
                    width: \\'40px\\',
                    height: \\'40px\\',
                },
                barSize: {
                    width: \\'100%\\',
                    height: \\'50px\\',
                },
                ready: function() {},
                success: function() {
                    alert(\\'验证成功,添加你自己的代码!\\');
                    //......后续操作
                },
                error: function() {
                    //alert(\\'验证失败!\\');
                }
            });
            //滑动验证码 SlidingVerificationCode
            $(\\'#SlidingVerificationCode\\').slideVerify({
                type: 1, //类型
                vOffset: 5, //误差量,根据需求自行调整
                barSize: {
                    width: \\'100%\\',
                    height: \\'50px\\',
                },
                ready: function() {},
                success: function() {
                    alert(\\'验证成功,添加你自己的代码!\\');
                    //......后续操作
                },
                error: function() {
                    //alert(\\'验证失败!\\');
                }
            });
            //点选验证码 Click-onVerificationCode
            $(\\'#Click-onVerificationCode\\').pointsVerify({
                defaultNum: 4, //默认的文字数量
                checkNum: 2, //校对的文字数量
                vSpace: 5, //间隔
                imgName: [\\'域名\\', \\'域名\\'],
                imgSize: {
                    width: \\'100%\\',
                    height: \\'173px\\',
                },
                barSize: {
                    width: \\'100%\\',
                    height: \\'50px\\',
                },
                ready: function() {},
                success: function() {
                    alert(\\'验证成功,添加你自己的代码!\\');
                    //......后续操作
                },
                error: function() {
                    //alert(\\'验证失败!\\');
                }
            });
        </script>
    </body>

</html>

域名

@charset "utf-8";
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

h3 {
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.top {
    width: 1920px;
    height: 1040px;
    background: whitesmoke;
    .Northwest,
    .North,
    .Northeast,
    .west,
    .centre,
    .east,
    .Southwest,
    .South,
    .Southeast {
        width: 638px;
        height: 344px;
        border: 1px solid;
        float: left;
        .spjz {
            width: 50%;
            margin: 0 auto;
        }
    }
}

.bottom {
    width: 1920px;
    height: 40px;
    background: black;
    text-align: center;
    float: left;
}


/*常规验证码*/

.verify-code {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 5px;
    border: 1px solid #ddd;
}

.cerify-code-panel {
    height: 100%;
    overflow: hidden;
}

.verify-code-area {
    float: left;
}

.verify-input-area {
    width: 50%;
    float: left;
}

.verify-change-area {
    width: 50%;
    text-align: center;
    line-height: 30px;
    float: left;
}

.varify-input-code {
    display: inline-block;
    width: 100%;
    height: 25px;
}

.verify-change-code {
    color: #337AB7;
    cursor: pointer;
}

.verify-btn {
    width: 100%;
    height: 50px;
    background-color: #337AB7;
    color: #FFFFFF;
    border: none;
    margin-top: 10px;
}


/*滑动验证码*/

.verify-bar-area {
    position: relative;
    background: #FFFFFF;
    text-align: center;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
}

.verify-bar-area .verify-move-block {
    position: absolute;
    top: 0px;
    left: 0;
    background: #fff;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    box-shadow: 0 0 2px #888888;
    -webkit-border-radius: 1px;
}

.verify-bar-area .verify-move-block:hover {
    background-color: #337ab7;
    color: #FFFFFF;
}

.verify-bar-area .verify-left-bar {
    position: absolute;
    top: -1px;
    left: -1px;
    background: #f0fff0;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
}

.verify-img-panel {
    margin: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
    border-radius: 3px;
    position: relative;
}

.verify-img-panel .verify-refresh {
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.verify-img-panel .icon-refresh {
    font-size: 20px;
    color: #fff;
}

.verify-img-panel .verify-gap {
    background-color: #fff;
    position: relative;
    z-index: 2;
    border: 1px solid #fff;
}

.verify-bar-area .verify-move-block .verify-sub-block {
    position: absolute;
    text-align: center;
    z-index: 3;
    border: 1px solid #fff;
}

.verify-bar-area .verify-move-block .verify-icon {
    font-size: 18px;
}

.verify-bar-area .verify-msg {
    z-index: 3;
}


/*字体图标的css*/

@font-face {
    font-family: "iconfont";
    src: url(\\'../fonts/域名?t=1508229193188\\');
    /* IE9*/
    src: url(\\'../fonts/域名?t=1508229193188#iefix\\') format(\\'embedded-opentype\\'), /* IE6-IE8 */
    url(\\'data:application/x-font-woff;charset=utf-8;base64,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\\') format(\\'woff\\'), url(\\'../fonts/域名?t=1508229193188\\') format(\\'truetype\\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url(\\'../fonts/域名?t=1508229193188#iconfont\\') format(\\'svg\\');
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-check:before {
    content: "\e645";
}

.icon-close:before {
    content: "\e646";
}

.icon-right:before {
    content: "\e6a3";
}

.icon-refresh:before {
    content: "\e6a4";
}

域名

(function($,window,document,undefined){var Code=function(ele,opt){this.$element=ele,域名ults={type:1,figure:100,arith:0,width:\\'200px\\',height:\\'60px\\',fontSize:\\'30px\\',codeLength:6,btnId:\\'check-btn\\',ready:function(){},success:function(){},error:function(){}},域名ons=$.extend({},域名ults,opt)};var _code_chars=[0,1,2,3,4,5,6,7,8,9,\\'a\\',\\'b\\',\\'c\\',\\'d\\',\\'e\\',\\'f\\',\\'g\\',\\'h\\',\\'i\\',\\'j\\',\\'k\\',\\'l\\',\\'m\\',\\'n\\',\\'o\\',\\'p\\',\\'q\\',\\'r\\',\\'s\\',\\'t\\',\\'u\\',\\'v\\',\\'w\\',\\'x\\',\\'y\\',\\'z\\',\\'A\\',\\'B\\',\\'C\\',\\'D\\',\\'E\\',\\'F\\',\\'G\\',\\'H\\',\\'I\\',\\'J\\',\\'K\\',\\'L\\',\\'M\\',\\'N\\',\\'O\\',\\'P\\',\\'Q\\',\\'R\\',\\'S\\',\\'T\\',\\'U\\',\\'V\\',\\'W\\',\\'X\\',\\'Y\\',\\'Z\\'];var _code_color1=[\\'#fffff0\\',\\'#f0ffff\\',\\'#f0fff0\\',\\'#fff0f0\\'];var _code_color2=[\\'#FF0033\\',\\'#006699\\',\\'#993366\\',\\'#FF9900\\',\\'#66CC66\\',\\'#FF33CC\\'];域名otype={init:function(){var _this=this;域名Dom();域名ode();域名y();this.$element[0].onselectstart=域名ag=function(){return false};this.$域名(\\'.verify-code, .verify-change-code\\').on(\\'click\\',function(){域名ode()});域名域名(\\'click\\',function(){域名kCode()})},loadDom:function(){var panelHtml=\\'<div class="cerify-code-panel"><div class="verify-code"></div><div class="verify-code-area"><div class="verify-input-area"><input type="text" class="varify-input-code" /></div><div class="verify-change-area"><a class="verify-change-code">换一张</a></div></div></div>\\';this.$域名nd(panelHtml);域名Doms={code_btn:$(\\'#\\'+域名d),code:this.$域名(\\'.verify-code\\'),code_area:this.$域名(\\'.verify-code-area\\'),code_input:this.$域名(\\'.varify-input-code\\')};域名.css({\\'width\\':域名h,\\'height\\':域名ht,\\'line-height\\':域名ht,\\'font-size\\':域名Size});域名域名({\\'width\\':域名h})},setCode:function(){var color1Num=域名r(域名om()*3);var color2Num=域名r(域名om()*5);域名.css({\\'background-color\\':_code_color1[color1Num],\\'color\\':_code_color2[color2Num]});域名域名(\\'\\');var code=\\'\\';域名_chose=\\'\\';if(域名==1){for(var i=0;i<域名Length;i+=1){var charNum=域名r(域名om()*52);var tmpStyle=(charNum%2==0)?"font-style:italic;margin-right: 10px;":"font-weight:bolder;";tmpStyle+=(域名r(域名om()*2)==1)?"font-weight:bolder;":"";域名_chose+=_code_chars[charNum];code+=\\'<font style="\\'+tmpStyle+\\'">\\'+_code_chars[charNum]+\\'</font>\\'}}else{var num1=域名r(域名om()*域名re);var num2=域名r(域名om()*域名re);if(域名h==0){var tmparith=域名r(域名om()*3)}switch(tmparith){case 1:域名_chose=parseInt(num1)+parseInt(num2);code=num1+\\' + \\'+num2+\\' = ?\\';break;case 2:if(parseInt(num1)<parseInt(num2)){var tmpnum=num1;num1=num2;num2=tmpnum}域名_chose=parseInt(num1)-parseInt(num2);code=num1+\\' - \\'+num2+\\' = ?\\';break;default:域名_chose=parseInt(num1)*parseInt(num2);code=num1+\\' × \\'+num2+\\' = ?\\';break}}域名.html(code)},checkCode:function(){if(域名==1){var own_input=域名域名().toUpperCase();域名_chose=域名perCase()}else{var own_input=域名域名()}if(own_input==域名_chose){域名ess()}else{域名r();域名ode()}}};var Slide=function(ele,opt){this.$element=ele,域名ults={type:1,vOffset:5,vSpace:5,imgName:[\\'域名\\',\\'域名\\'],imgSize:{width:\\'400px\\',height:\\'200px\\'},blockSize:{width:\\'50px\\',height:\\'50px\\'},barSize:{width:\\'400px\\',height:\\'40px\\'},ready:function(){},success:function(){},error:function(){}},域名ons=$.extend({},域名ults,opt)};域名otype={init:function(){var _this=this;域名Dom();域名y();this.$element[0].onselectstart=域名ag=function(){return false};域名域名(\\'touchstart\\',function(e){域名t(e)});域名域名(\\'mousedown\\',function(e){域名t(e)});域名ventListener("touchmove",function(e){域名(e)});域名ventListener("mousemove",function(e){域名(e)});域名ventListener("touchend",function(){域名()});域名ventListener("mouseup",function(){域名()});_this.$域名(\\'.verify-refresh\\').on(\\'click\\',function(){域名esh()})},loadDom:function(){域名rand=域名r(域名om()*域名域名th);var panelHtml=\\'\\';var tmpHtml=\\'\\';if(域名!=1){panelHtml+=\\'<div class="verify-img-panel"><div  class="verify-refresh"><i class="iconfont icon-refresh"></i></div><div class="verify-gap"></div></div>\\';tmpHtml=\\'<div  class="verify-sub-block"></div>\\'}panelHtml+=\\'<div class="verify-bar-area"><span  class="verify-msg">向右滑动完成验证</span><div class="verify-left-bar"><span  class="verify-msg"></span><div  class="verify-move-block"><i  class="verify-icon iconfont icon-right"></i>\\'+tmpHtml+\\'</div></div></div>\\';this.$域名nd(panelHtml);域名Doms={gap:this.$域名(\\'.verify-gap\\'),sub_block:this.$域名(\\'.verify-sub-block\\'),img_panel:this.$域名(\\'.verify-img-panel\\'),bar_area:this.$域名(\\'.verify-bar-area\\'),move_block:this.$域名(\\'.verify-move-block\\'),left_bar:this.$域名(\\'.verify-left-bar\\'),msg:this.$域名(\\'.verify-msg\\'),icon:this.$域名(\\'.verify-icon\\'),refresh:this.$域名(\\'.verify-refresh\\')};域名us=false;域名ize=域名tSize(this);域名.css({\\'width\\':域名域名h,\\'height\\':域名域名ht});域名域名({\\'width\\':域名域名h,\\'height\\':域名域名ht});域名域名({\\'width\\':域名width,\\'height\\':域名height,\\'background\\':\\'url(images/\\'+域名ame[域名rand]+\\')\\',\\'background-size\\':域名width+\\' \\'+域名height});域名域名({\\'width\\':域名width,\\'height\\':域名域名ht,\\'line-height\\':域名域名ht});域名域名({\\'width\\':域名域名ht,\\'height\\':域名域名ht});域名域名({\\'width\\':域名域名ht,\\'height\\':域名域名ht});域名Set()},start:function(e){域名.text(\\'\\');域名域名(\\'background-color\\',\\'#337ab7\\');域名域名(\\'border-color\\',\\'#337AB7\\');域名.css(\\'color\\',\\'#fff\\');域名Propagation();域名us=true},move:function(e){if(域名us){if(!域名hes){var x=域名ntX}else{var x=域名hes[0].pageX}var bar_area_left=域名eft(域名area[0]);var move_block_left=x-bar_area_left;if(域名!=1){if(move_block_left>=域名area[0].offsetWidth-parseInt(parseInt(域名域名h)/2)-2){move_block_left=域名area[0].offsetWidth-parseInt(parseInt(域名域名h)/2)-2}}else{if(move_block_left>=域名area[0].offsetWidth-parseInt(parseInt(域名域名ht)/2)+3){this.$域名(\\'.verify-msg:eq(1)\\').text(\\'松开验证\\');move_block_left=域名area[0].offsetWidth-parseInt(parseInt(域名域名ht)/2)+3}else{this.$域名(\\'.verify-msg:eq(1)\\').text(\\'\\')}}if(move_block_left<=0){move_block_left=parseInt(parseInt(域名域名h)/2)}域名域名(\\'left\\',move_block_left-parseInt(parseInt(域名域名h)/2)+"px");域名域名(\\'width\\',move_block_left-parseInt(parseInt(域名域名h)/2)+"px")}},end:function(){var _this=this;if(域名us){if(域名!=1){var vOffset=parseInt(域名set);if(parseInt(域名.css(\\'left\\'))>=(parseInt(域名域名(\\'left\\'))-vOffset)&&parseInt(域名.css(\\'left\\'))<=(parseInt(域名域名(\\'left\\'))+vOffset)){域名域名(\\'background-color\\',\\'#5cb85c\\');域名域名({\\'border-color\\':\\'#5cb85c\\',\\'background-color\\':\\'#fff\\'});域名.css(\\'color\\',\\'#fff\\');域名.removeClass(\\'icon-right\\');域名.addClass(\\'icon-check\\');域名域名();域名域名nd(\\'mousedown touchstart\\');域名ess()}else{域名域名(\\'background-color\\',\\'#d9534f\\');域名域名(\\'border-color\\',\\'#d9534f\\');域名.css(\\'color\\',\\'#fff\\');域名.removeClass(\\'icon-right\\');域名.addClass(\\'icon-close\\');setTimeout(function(){域名域名ate({\\'left\\':\\'0px\\'},\\'fast\\');域名域名ate({\\'width\\':\\'40px\\'},\\'fast\\');域名域名({\\'border-color\\':\\'#ddd\\'});域名域名(\\'background-color\\',\\'#fff\\');域名.css(\\'color\\',\\'#000\\');域名.removeClass(\\'icon-close\\');域名.addClass(\\'icon-right\\');_this.$域名(\\'.verify-msg:eq(0)\\').text(\\'向右滑动完成验证\\')},400);域名r()}}else{if(parseInt(域名域名(\\'left\\'))>=(parseInt(域名width)-parseInt(域名域名ht)-parseInt(域名set))){域名域名(\\'background-color\\',\\'#5cb85c\\');域名域名({\\'color\\':\\'#4cae4c\\',\\'border-color\\':\\'#5cb85c\\',\\'background-color\\':\\'#fff\\'});域名.css(\\'color\\',\\'#fff\\');域名.removeClass(\\'icon-right\\');域名.addClass(\\'icon-check\\');域名域名();域名域名nd(\\'mousedown\\');域名域名nd(\\'touchstart\\');this.$域名(\\'.verify-msg:eq(1)\\').text(\\'验证成功\\');域名ess()}else{域名域名(\\'background-color\\',\\'#d9534f\\');域名域名(\\'border-color\\',\\'#d9534f\\');域名.css(\\'color\\',\\'#fff\\');域名.removeClass(\\'icon-right\\');域名.addClass(\\'icon-close\\');setTimeout(function(){域名域名ate({\\'left\\':\\'0px\\'},\\'fast\\');域名域名ate({\\'width\\':\\'40px\\'},\\'fast\\');域名域名({\\'border-color\\':\\'#ddd\\'});域名域名(\\'background-color\\',\\'#fff\\');域名.css(\\'color\\',\\'#000\\');域名.removeClass(\\'icon-close\\');域名.addClass(\\'icon-right\\');_this.$域名(\\'.verify-msg:eq(0)\\').text(\\'向右滑动解锁\\')},400);域名r()}}域名us=false}},resetSize:function(obj){var img_width,img_height,bar_width,bar_height;var parentWidth=obj.$域名nt().width()||$(window).width();var parentHeight=obj.$域名nt().height()||$(window).height();if(域名域名xOf(\\'%\\')!=-1){img_width=parseInt(域名域名h)/100*parentWidth+\\'px\\'}else{img_width=域名域名h}if(域名域名xOf(\\'%\\')!=-1){img_height=parseInt(域名域名ht)/100*parentHeight+\\'px\\'}else{img_height=域名域名ht}if(域名域名xOf(\\'%\\')!=-1){bar_width=parseInt(域名域名h)/100*parentWidth+\\'px\\'}else{bar_width=域名域名h}if(域名域名xOf(\\'%\\')!=-1){bar_height=parseInt(域名域名ht)/100*parentHeight+\\'px\\'}else{bar_height=域名域名ht}return{img_width:img_width,img_height:img_height,bar_width:bar_width,bar_height:bar_height}},randSet:function(){var rand1=域名r(域名om()*9+1);var rand2=域名r(域名om()*9+1);var top=rand1*parseInt(域名height)/15+parseInt(域名height)*0.1;var left=rand2*parseInt(域名width)/15+parseInt(域名width)*0.1;this.$域名(\\'.verify-img-panel\\').css(\\'margin-bottom\\',域名ce+\\'px\\');this.$域名(\\'.verify-gap\\').css({\\'top\\':top,\\'left\\':left});this.$域名(\\'.verify-sub-block\\').css({\\'top\\':\\'-\\'+(parseInt(域名height)-top+域名ce+2)+\\'px\\',\\'background-image\\':\\'url(images/\\'+域名ame[域名rand]+\\')\\',\\'background-size\\':域名width+\\' \\'+域名height,\\'background-position-y\\':\\'-\\'+top+\\'px\\',\\'background-position-x\\':\\'-\\'+left+\\'px\\'})},refresh:function(){域名Set();域名rand=域名r(域名om()*域名域名th);this.$域名(\\'.verify-img-panel\\').css({\\'background\\':\\'url(images/\\'+域名ame[域名rand]+\\')\\',\\'background-size\\':域名width+\\' \\'+域名height});this.$域名(\\'.verify-sub-block\\').css({\\'background-image\\':\\'url(images/\\'+域名ame[域名rand]+\\')\\',\\'background-size\\':域名width+\\' \\'+域名height})},getLeft:function(node){var left=$(node).offset().left;return left}};var Points=function(ele,opt){this.$element=ele,域名ults={defaultNum:4,checkNum:3,vSpace:5,imgName:[\\'域名\\',\\'域名\\'],imgSize:{width:\\'400px\\',height:\\'200px\\'},barSize:{width:\\'400px\\',height:\\'40px\\'},ready:function(){},success:function(){},error:function(){}},域名ons=$.extend({},域名ults,opt)};域名otype={init:function(){var _this=this;域名Dom();域名esh();域名y();this.$element[0].onselectstart=域名ag=function(){return false};_this.$域名(\\'.verify-img-panel canvas\\').on(\\'click\\',function(e){域名(域名ousePos(this,e));if(域名==域名kNum){域名=域名tePoint(域名ousePos(this,e));setTimeout(function(){var flag=域名arePos(域名Pos,域名kPosArr);if(flag==false){域名r();_this.$域名(\\'.verify-bar-area\\').css({\\'color\\':\\'#d9534f\\',\\'border-color\\':\\'#d9534f\\'});_this.$域名(\\'.verify-msg\\').text(\\'验证失败\\');setTimeout(function(){_this.$域名(\\'.verify-bar-area\\').css({\\'color\\':\\'#000\\',\\'border-color\\':\\'#ddd\\'});域名esh()},400)}else{_this.$域名(\\'.verify-bar-area\\').css({\\'color\\':\\'#4cae4c\\',\\'border-color\\':\\'#5cb85c\\'});_this.$域名(\\'.verify-msg\\').text(\\'验证成功\\');_this.$域名(\\'.verify-refresh\\').hide();_this.$域名(\\'.verify-img-panel\\').unbind(\\'click\\');域名ess()}},400)}if(域名<域名kNum){域名=域名tePoint(域名ousePos(this,e))}});_this.$域名(\\'.verify-refresh\\').on(\\'click\\',function(){域名esh()})},loadDom:function(){域名Pos=[];域名kPosArr=[];域名=1;域名rand=域名r(域名om()*域名域名th);var panelHtml=\\'\\';var tmpHtml=\\'\\';域名ize=域名tSize(this);panelHtml+=\\'<div class="verify-img-panel"><div  class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="\\'+域名width+\\'" height="\\'+域名height+\\'"></canvas></div><div class="verify-bar-area"><span  class="verify-msg"></span></div>\\';this.$域名nd(panelHtml);域名Doms={img_panel:this.$域名(\\'.verify-img-panel\\'),bar_area:this.$域名(\\'.verify-bar-area\\'),msg:this.$域名(\\'.verify-msg\\')};域名域名({\\'width\\':域名width,\\'height\\':域名height,\\'background-size\\':域名width+\\' \\'+域名height,\\'margin-bottom\\':域名ce+\\'px\\'});域名域名({\\'width\\':域名域名h,\\'height\\':域名域名ht,\\'line-height\\':域名域名ht})},drawImg:function(obj,img){var canvas=this.$域名(\\'canvas\\')[0];var ctx=域名ontext("2d");域名Image(img,0,0,parseInt(域名width),parseInt(域名height));var fontSizeArr=[\\'italic small-caps bold 20px microsoft yahei\\',\\'small-caps normal 25px arial\\',\\'34px microsoft yahei\\'];var fontStr=\\'天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩体率宾归王\\';var fontChars=[];var avg=域名r(parseInt(域名width)/(parseInt(域名ultNum)+1));var tmp_index=\\'\\';var color2Num=域名r(域名om()*5);for(var i=1;i<=域名ultNum;i+=1){fontChars[i-1]=域名hars(fontStr,fontChars);tmp_index=域名r(域名om()*3);域名=fontSizeArr[tmp_index];域名Style=_code_color2[color2Num];if(域名r(域名om()*2)==1){var tmp_y=域名r(parseInt(域名height)/2)+tmp_index*20+20}else{var tmp_y=域名r(parseInt(域名height)/2)-tmp_index*20}域名Text(fontChars[i-1],avg*i,tmp_y);域名Pos[i-1]={\\'char\\':fontChars[i-1],\\'x\\':avg*i,\\'y\\':tmp_y}}for(var i=0;i<(域名ultNum-域名kNum);i+=1){域名fle(域名Pos).pop()}var msgStr=\\'\\';for(var i=0;i<域名th;i+=1){msgStr+=域名Pos[i].char+\\',\\'}域名.text(\\'请顺序点击【\\'+域名tring(0,域名th-1)+\\'】\\');return 域名Pos},getMousePos:function(obj,event){var e=event||域名t;var scrollX=域名llLeft||域名llLeft;var scrollY=域名llTop||域名llTop;var x=域名ntX-($(obj).offset().left-$(window).scrollLeft());var y=域名ntY-($(obj).offset().top-$(window).scrollTop());return{\\'x\\':x,\\'y\\':y}},getChars:function(fontStr,fontChars){var tmp_rand=parseInt(域名r(域名om()*域名th));if(tmp_rand>0){tmp_rand=tmp_rand-1}tmp_char=域名At(tmp_rand);if($.inArray(tmp_char,fontChars)==-1){return tmp_char}else{return 域名hars(fontStr,fontChars)}},shuffle:function(arr){var m=域名th,i;while(m){i=(域名om()*m--)>>>0;[arr[m],arr[i]]=[arr[i],arr[m]]}return arr},createPoint:function(pos){域名域名nd(\\'<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:\\'+parseInt(pos.y-10)+\\'px;left:\\'+parseInt(pos.x-10)+\\'px;">\\'+域名+\\'</div>\\');return++域名},comparePos:function(fontPos,checkPosArr){var flag=true;for(var i=0;i<域名th;i+=1){if(!(parseInt(checkPosArr[i].x)+40>fontPos[i].x&&parseInt(checkPosArr[i].x)-40<fontPos[i].x&&parseInt(checkPosArr[i].y)+40>fontPos[i].y&&parseInt(checkPosArr[i].y)-40<fontPos[i].y)){flag=false;break}}return flag},refresh:function(){var _this=this;this.$域名(\\'.point-area\\').remove();域名Pos=[];域名kPosArr=[];域名=1;域名rand=域名r(域名om()*域名域名th);var img=new Image();域名=\\'images/\\'+域名ame[域名rand];$(img).on(\\'load\\',function(e){域名Pos=域名Img(_this,this)})}};$.域名Verify=function(options,callbacks){var code=new Code(this,options);域名()};$.域名eVerify=function(options,callbacks){var slide=new Slide(this,options);域名()};$.域名tsVerify=function(options,callbacks){var points=new Points(this,options);域名()}})(jQuery,window,document);

标签:编程
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。