获取验证码：倒计时封装

同一套网页中有多个地方用到了 获取验证码 的功能，上一个项目中也有这种用法，但是当时对封装之类的实在是搞不明白，想了好多办法依然没能很好的复用。最近看了《JavaScript设计模式》，有一点点灵感，封装的也不知道是不是那么回事，反正实现了复用，以此纪念我的 倒计时

function CountDown(opt) { // opt是传来的参数对象 var target = opt.target; // 被点击对象 var time = opt.time; // 想要倒计时的时间 以 ’S‘为单位 if(typeof time != "number"){ return false; } var targetHtml = $(target).html(); function downBySecond() { // 倒计时 var countdown = time; this.downFun = function () { if(countdown == 0){ countdown = time; $(target).on('click').removeAttr('disabled'); // 重新绑定点击事件 clearInterval(timer); // 手动停止计数器 $(target).html(targetHtml); }else{ $(target).html(countdown + 's后重新获取'); countdown--; $(target).off('click').attr('disabled','true'); // 点击失效并且样式为disabled样式 } } } var fun = new downBySecond(); fun.downFun(); var timer = setInterval(fun.downFun,1000); }

调用的写法

$('.btn').on('click',function (e) { var obj = {}; obj.target = e.target; obj.time = 60; CountDown(obj); });