同一套网页中有多个地方用到了 获取验证码 的功能,上一个项目中也有这种用法,但是当时对封装之类的实在是搞不明白,想了好多办法依然没能很好的复用。最近看了《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);
});