获取验证码:倒计时封装

来源:互联网 发布:同花顺期货模拟软件 编辑:程序博客网 时间:2024/06/05 00:43

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