jQuery-验证码倒计时的实现

点击发送验证码，通常需要加入倒计时功能，HTML如下：

<center class='block captchaArea'>


     <input class="input pwd" type="text" placeholder="请输入验证码">
    
     <span class="captcha">获取验证码</span>
    
     <span class="num"></span>

</center>

JS如下：

$(".captcha").click(function () {
    
    
    $(".captcha").hide()
    $(".num").show()
    var second = 30
    $(".num").text((second) + "秒")
    var interval = setInterval(function () {
    
    
        second--
        $(".num").text((second) + "秒")
        if (second === -1) {
    
    
            $(".captcha").text("重发验证码")
            clearInterval(interval)
            $(".num").hide()
            $(".captcha").show()
        }
    }, 1000)
})

要点如下：

1.使用captcha和num分别切换显示隐藏，是为了防止captcha被再次点击，再次触发点击事件，造成倒计时混乱。

2.当second=-1时，清除定时器（clearInterval），并将captcha改内容为重发验证码