身思乐,人事爱,稳恒不言败!

js获取验证码组件

组件js部分:

btnHelp = {
    //验证码接口锁
    randomLock:false,
    //获取验证码
    getRandom:function(_this, _rthis){
        //判断有无校验函数
        if(_rthis.settings.before){
            if(_rthis.settings.before() === false){
                return false;
            }
        }
        if(btnHelp.randomLock == true){
            return false;
        }else{
            btnHelp.randomLock = true;
        }
        $.ajax({
            type : 'post',
            dataType: 'json',
            url : _rthis.settings.url,
            data : _rthis.settings.param,
            success : function(data){
                _rthis.settings.callBack(data);
                if(data.code == '0'){
                    var count = _rthis.settings.time;
                    _this.html(_rthis.settings.loadHtml.replace('#random#',count+'秒后可再次获取')).addClass(_rthis.settings.reClass);
                    //开始倒计时验证码
                    btnHelp.randomTimer = setInterval(function(){
                        if(count == 0){
                            btnHelp.randomLock = false;
                            clearInterval(btnHelp.randomTimer);
                            _this.html(_rthis.settings.reHtml).removeClass(_rthis.settings.reClass);
                        }else{
                            count--;
                            _this.html(_rthis.settings.loadHtml.replace('#random#',count+'秒后可再次获取'));
                        }
                    },1000);
                }else{//失败 重新获取
                    layer_tool.errorMsg(data.message);
                    btnHelp.randomLock = false;
                    _this.html(_rthis.settings.reHtml);
                }
            },
            error: function(xmlHttpRequest, textStatus, errorThrown){
                btnHelp.randomLock = false;
                _rthis.settings.callBack(xmlHttpRequest);
                _this.html(_rthis.settings.reHtml);
            }
        });
    },
    //开始画按钮
    draw:function(_rthis){
        if(_rthis.settings.target && _rthis.settings.target.length > 0){
            if(_rthis.settings.defClick == true){
                btnHelp.getRandom(_rthis.settings.target, _rthis);
            }
        }
    }
};

 

randomBtn: function(options){
    var _rthis = this;
    this.settings = {
            target:[],//jQuery 对象
            style:'', //按钮样式
            btnClass:'commonButton_yellow',//按钮class
            reClass:'commonRandom_load',   //倒计时 样式
            html:'获取验证码',              //按钮初始化html
            reHtml:'重新获取',             //失败或倒计时结束
            loadHtml:'#random#',           //倒计时hmtl 
            url:'',                        //请求url
            param:'',                      //请求入参
            time:60,                       //倒计时时间
            callBack:function(){},         //返回后事件
            defClick:true,                 //是否默认绑定倒计时
            before:null
    };
    $.extend(this.settings,options);
    
    /*
     * 获取验证码
     */
    this.getRandom = function(_this){
        btnHelp.getRandom(_this);
    }
    
    btnHelp.draw(_rthis);
}

页面执行函数:

/* 获取验证码 */
function funGetCode(target, obj){
    var s = {
        target: target,               //jQuery 对象
        loadHtml:'#random#',          //倒计时hmtl 
        url: obj.url,                 //请求functionCode
        btnClass:'n_send',            //按钮样式
        reClass:'n_sended',           //倒计时样式
        html:'获取验证码',
        param:{
            type: obj.type,
            value: obj.value
        },                     //请求入参
        callBack:function(data){
            if(data.code == '0'){
                /* 显示 短信已发送  */
            }else{
                layer_tool.errorMsg(data.message); //提示错误消息
            }
        },
        before : function(){
           
        }
    };
    var rb = new tool.randomBtn(s);
}

css部分:

.n_send{
    width: 44%;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    border: 1px solid #ccc;
    padding: 10px 0;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset;
    cursor: pointer;
}
.n_sended{
    background-color: #cecece;
    border-color: #cecece;
    color: #fff;
}