组件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; }