jquery短信验证码倒计时

1. 演示

1. 点击前：
   
2. 点击后：
   

2. 代码

1. HTML代码

<input type="button" value="获取验证码" class="sentBtn">

2. css代码

<style>
    /* 发送按钮禁止样式 */
    .sentBtn.disabled {
        background-color: #CCC !important;
        cursor: not-allowed !important;
    }

    /* 发送按钮样式 */
    .sentBtn {
        height: 35px;
        min-width: 100px;
        padding: 5px;
        border: none;
        color: #FFF;
        background-color: red;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

3. jquery代码

$('.sentBtn').click(function () {
    $(this).addClass("disabled"); //点击获取验证码后，禁用该按钮，开始倒计时
    var time = 60; //倒计时时间，自定义
    var $this = $(this); //备份，定时器是异步的，此this非彼this
    var timer = setInterval(function () {
        time--; //开始倒计时
        if (time == 0) { //当倒计时为0秒时，关闭定时器，更改按钮显示文本并设置为可以点击
            clearInterval(timer);
            $this.val('获取验证码');
            $this.removeClass("disabled");
            return;
        }
        $this.val(time + "秒后重获"); //显示剩余秒数
    }, 1000); //定时器一秒走一次，每次减一，就是倒计时了
});