验证码倒计时代码封装(对象封装)

最新推荐文章于 2024-06-17 10:51:35 发布

原创最新推荐文章于 2024-06-17 10:51:35 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#验证码倒计时 #js封装

js 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的验证码倒计时功能。该功能通过禁用按钮并在指定时间内显示剩余秒数来防止重复点击。当计时结束时，按钮会重新启用并恢复到初始状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
 * 封装验证码倒计时对象
 * 调用规则，必须是input type="button"元素来调用
 * 例如:
 *  <input type="button" class="get_code" value="获取验证码"></input >
 *  var newCode = new GetCode($('.get_code').get(0));
 *  newCode.sendCode();
 * */
function GetCode (element){
    this._init_(element);
}
GetCode.prototype = {
    constructor : GetCode,
    _init_ : function(element) {
        this.clock = '';
        this.nums = 60;
        this.btn = element;
    },
    sendCode: function (){
        this.btn.disabled = true; //将按钮置为不可点击
        this.btn.value = this.nums + '秒后可重发';
        var that = this
        this.clock = setInterval(this.doLoop(that), 1000); //一秒执行一次
    },
    /*需要注意的地方*/
    doLoop: function(that){
        var fuc = function(){
            that.nums--;
            if(that.nums > 0) {
                that.btn.value = that.nums + '秒后可重发';
            } else {
                clearInterval(that.clock); //清除js定时器
                that.btn.disabled = false;
                that.btn.value = '获取验证码';
                that.nums = 60; //重置时间
            }
        }
        return fuc; 
    }
}