jQuery-验证码倒计时的实现

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

1 
2 3 获取验证码 4 5

JS如下:

 1 $(".captcha").click(function () {
 2     $(".captcha").hide()
 3     $(".num").show()
 4     var second = 30
 5     $(".num").text((second) + "秒")
 6     var interval = setInterval(function () {
 7         second--
 8         $(".num").text((second) + "秒")
 9         if (second === -1) {
10             $(".captcha").text("重发验证码")
11             clearInterval(interval)
12             $(".num").hide()
13             $(".captcha").show()
14         }
15     }, 1000)
16 })

要点如下:

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

2.当second=-1时,清除定时器(clearInterval),并将captcha改内容为重发验证码。

你可能感兴趣的:(jQuery-验证码倒计时的实现)